axios和Promise封装

最新推荐文章于 2024-07-03 08:00:00 发布

知所云

最新推荐文章于 2024-07-03 08:00:00 发布

阅读量961

点赞数

本文链接：https://blog.csdn.net/qq_32881447/article/details/106196363

版权

本文介绍如何利用Promise特性，结合Axios库对HTTP请求进行封装，以简化浏览器和Node.js环境下的接口调用过程。

摘要由CSDN通过智能技术生成

Promise解决异步操作
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中
进行接口请求封装

// options中包含着数据
export function axiosPackage(options) {
    
  return new Promise((resolve, reject) => {
      
      let httpDefaultOpts = { //http默认配置
          method:options.method,
          url:options.url,
          timeout: 600000,
          params:Object.assign(options.params),
          data:Qs.stringify(options.params),
          headers: options.method=='get'?{
              'X-Requested-With': 'XMLHttpRequest',
              "Accept": "application/json",
              "Content-Type": "application/json; charset=UTF-8",
              // "Authorization": token
          }:{
              'X-Requested-With': 'XMLHttpRequest',
              'Content-Type': options.ContentType || 'application/x-www-form-urlencoded; charset=UTF-8', // 由于部分post请求使用的Content-Type是application/json
              "Accept": "application/json",
          }
      }
      if(options.ContentType == 'application/json'){
        httpDefaultOpts.data = JSON.stringify(Object.assign(options.params))
      }
      if(options.method=='get'){ //判断是get请求还是post请求
          delete httpDefaultOpts.data
      }else{
          delete httpDefaultOpts.params
      }
      instance(httpDefaultOpts)
          .then(response => {//then 请求成功之后进行什么操作
              if(response.data.code == 200){ // 服务端返回code200为成功，其他为错误提示
               resolve(response.data)//把请求到的数据发到引用请求的地方
              }else{
                reject(response)
              }
          })
          .catch(error => {
              if (error && error.response) {   
                switch (error.response.status) {
                case 400: error.message = '请求错误(400)' ; break;
                case 401: error.message = "未授权，请重新登录(401)"; break;
                case 403: error.message = "拒绝访问(403)"; break;
                case 404: error.message = "请求出错(404)"; break;
                case 408: error.message = "请求超时(408)"; break;
                case 500: error.message = "服务器错误(500)"; break;
                case 501: error.message = "服务未实现(501)"; break;
                case 502: error.message = "网络错误(502)"; break;
                case 503: error.message = "服务不可用(503)"; break;
                case 504: error.message = "网络超时(504)"; break;
                case 505: error.message = "HTTP版本不受支持(505)"; break;
                default: error.message = `连接出错(${error.response.status})!`;
                }
                reject(error)             } 
          })

  })
}