封装简易axios函数

// 定义myAxios函数,接收一个配置对象config
 function myAxios(config) {
   // 返回一个Promise对象
   return new Promise((resolve, reject) => {
     // 创建一个XMLHttpRequest对象
     const xhr = new XMLHttpRequest()

     // 如果配置中有查询参数(config.params),则将其转化为URL参数并附加到URL上
     if (config.params) {
       const params = new URLSearchParams(config.params)
       const query = params.toString()
       config.url += `?${query}`
     }

     // 打开XHR请求,可以指定请求方法(config.method),默认为GET
     xhr.open(config.method || 'GET', config.url)

     // 监听XHR的loadend事件
     xhr.addEventListener('loadend', () => {
       // 检查HTTP状态码,如果在200到299之间,表示请求成功
       if (xhr.status >= 200 && xhr.status < 300) {
         // 解析JSON格式的响应数据,并将其传递给Promise的resolve函数
         resolve(JSON.parse(xhr.response))
       } else {
         // 如果HTTP状态码不在成功范围内,将响应数据传递给Promise的reject函数,并创建一个Error对象
         reject(new Error(xhr.response))
       }
     })

     // 如果配置中有请求数据(config.data),设置请求头为'application/json',并发送JSON格式的数据
     if (config.data) {
       xhr.setRequestHeader('Content-Type', 'application/json')
       xhr.send(JSON.stringify(config.data))
     } else {
       // 如果没有请求数据,直接发送请求
       xhr.send()
     }
   })
 }

 myAxios({
   url: ''
 }).then(res => {
   console.log(res)
 })

 myAxios({
   url: '',
   params: {
     pname: '广东省'
   }
 }).then(res => {
   console.log(res)
 })

 myAxios({
   url: '',
   method: 'POST',
   data: {
     username: '两袖清风怎敢误佳人',
     password: 'wyfmrl'
   },
 }).then(res => {
   console.log(res)
 })
posted @ 2023-09-22 21:16  唯有风  阅读(14)  评论(0编辑  收藏  举报