使用Promise封装api(axios, wx.request, uni.request)

1. 封装uni.request

const BASE_URL = ' '
export const myRequest = (options) => {
   return new Promise(resolve, reject){
       uni.request({
           url : BASE_URL + options.url,
           header: {
                'content-type': 'application/x-www-form-urlencoded'
            },
           method : options.method || 'GET',
           data : options.data || {},
           success :(res) => {
              if(res.data.status !== 0){
                 return uni.showToast({
                     title: '获取数据失败!'
                 })
              }
              resolve(res)
           },
           fail: (err) => {
              reject(err)
           }
       })
   }    
}  

//在main.js里 vue原型中全局注册
this.myRequest()调用

 

2. 封装wx.request()

与uni.request()大同小异  

 

搬运
原链接http://t.csdn.cn/Vs6Uo


//env.js
//设置公共访问的url，即环境变量 
module.exports = {
    // 开发环境
     dev: {
       baseUrl: 'https://localhost:3000'
    },
    // 测试环境
    test: {
      baseUrl: 'https://localhost:4000'
    },
    // 线上环境
    prod: {
      baseUrl:  'https://localhost:5000'
    }  
  }
 

//request.js
// 引入env中的url
const { baseUrl } = require('./env.js').test   //测试环境
  // 专属域名
  module.exports = {
    request: (url, method = 'POST', data = {}) => {
      // console.log(baseUrl)
      let _url = `${baseUrl}${url}`
      return new Promise((resolve, reject) => {
        wx.showLoading({
          title:"正在加载"
        })
  
        wx.request({
          url: _url, //请求路径
          data: data,    //请求参数
          method: method,   //请求方法get和post
          header: {
            'content-type': 'application/x-www-form-urlencoded'  //请求头
          },
          success: (res) => {
            // console.log(res)
            if(res.data.ret == 200){
              wx.hideLoading()
              resolve(res.data)
            }else{
              wx.showToast({
                title: '数据请求失败',
              })
            }
            fail:(err)=>{
               reject(err.data)
            }
          }
        })
      })
    }
  
  }
 
//api.js
const { request } = require('./request')
module.exports = {
    getList: (data) => {
      return request('/GetList','get',data); //第一个参数为地址，第二个参数为请求方式，第三个参数为传递的参数
    }
  }

　　

　3. 封装axios

 

引用http://t.csdn.cn/Wm2oB


 //封装代码http.js
/*
 * @Author: Mr Dong
 * @Date: 2022-03-08
 * @LastEditTime: 2022-03-09 
 * @LastEditors: Mr Dong
 */
import Vue from 'vue';
import axios from 'axios';
import qs from 'querystring'//序列化参数用


//决定是否过滤URL中的/api
let isFilterApi = !(process.env.NODE_ENV === 'development'); //线上环境还是本地环境,过滤/api
let _axios = axios.create({
  baseURL: '',
  withCredentials:true,//跨域请求时开启请求头可以携带cookie等信息
  timeout: 300000, //超时设置
  transformRequest: [function (data) {
    return data
  }],//处理请求格式用（这里不能少，否则content-type设置成multipart/form-data无效，具体原因未知）
  transformResponse: [function (data) {
    return data
  }]//处理返回格式用例如_axios.defaults.responseType = 'blob';
})
// 请求拦截器（如果不单独封装成多种单独的请求格式，判断将写在请求拦截中，自行考虑选用方式，个人觉得判断太多不如单独写）
_axios.interceptors.request.use(
  (config) => {
    return config
  }, // 发送请求前做的配置
  error => {  //请求错误处理
    Promise.reject(error)
}
);
// 响应拦截器
_axios.interceptors.response.use(
  (response) => response,
  (error) => Promise.reject(error), // 对请求错误做点什么
);
_axios.defaults.headers.common['Token'] = '1111'//token设置
//过滤/api
function filterApi(url) {
  url = isFilterApi? url:'/api'+url//跨域代理,开发环境自动添加'/api'
  return url
}
//通用请求错误提示
function _error(err){
  switch (Number(err.response.status)) {//这里字段根据自己项目修改
    case 400://一般是前台参数格式有问题
    Vue.prototype.$message({
            type: 'warning',
            showClose: true,
            message: '请求无效！'
        });
        break;
    case 404:
      Vue.prototype.$message({
            type: 'error',
            showClose: true,
            message: '未找到该接口'
        });
        break;
    case 500:
      Vue.prototype.$message({
            type: 'error',
            showClose: true,
            message: '服务器异常',
        });
        break;
}
}

//json格式post
export const JsonPost = (url, params) => new Promise((resolve, reject) => {
  url = filterApi(url)
  _axios.defaults.headers.post['Content-Type'] = 'application/json; charset=UTF-8';
  delete _axios.defaults.responseType
  _axios.post(url, JSON.stringify(params)).then((res) => {
    //resolve(res.data);
    resolve(JSON.parse(res.data));
  }).catch((err) => {
    _error(err)//通用错误提示
    reject(err.data);//特定界面错误处理
  });
});
//键值对格式post
export const FormDataPost = (url, params) => new Promise((resolve, reject) => {
  url = filterApi(url)
  _axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=utf-8';
  delete _axios.defaults.responseType
  _axios.post(url, qs.stringify(params)).then((res) => {
    //resolve(res.data);
    resolve(JSON.parse(res.data));    
  }).catch((err) => {
    _error(err)//通用错误提示
    reject(err.data);//特定界面错误处理
  });
});
//文件格式post，上传图片，文件等
export const FilePost = (url, params) => new Promise((resolve, reject) => {
  url = filterApi(url)
  _axios.defaults.headers.post['Content-Type'] = 'multipart/form-data';
  delete _axios.defaults.responseType
  _axios.post(url, params).then((res) => {
    resolve(res.data);
  }).catch((err) => {
    _error(err)//通用错误提示
    reject(err.data);//特定界面错误处理
  });
});
//返回格式为文件流，如导出excle文件流。
export const BlobPost = (url, params) => new Promise((resolve, reject) => {
  url = filterApi(url)
  _axios.defaults.headers.post['Content-Type'] = 'application/json; charset=UTF-8';
  _axios.defaults.responseType = 'blob';
  _axios.post(url, JSON.stringify(params)).then((res) => {
    resolve(res.data);
  }).catch((err) => {
    _error(err)//通用错误提示
    reject(err.data);//特定界面错误处理
  });
});
//get请求，这里注意和axios.get和axios.post请求参数格式的区别写法post{},get{params:{}}
export const get = (url, params) => new Promise((resolve, reject) => {
  url = filterApi(url)
  delete _axios.defaults.responseType
  _axios.get(url, { params }).then((res) => {
    //resolve(res.data);
    resolve(JSON.parse(res.data));
  }).catch((err) => {
    _error(err)//通用错误提示
    reject(err.data);//特定界面错误处理
  });
});
//第一种写法
//axios({method:'post',url:'',data:{}}
//axios({method:'get',url:'',params:{}})
//第二种写法，这里用的是第二种
//axios.get(url,{params:{}})
//axios.post(url,data:{})
//第三种写法不区分参数格式只用post格式，单独手动处理get的url，即手动序列化参数拼接到url后面。不提倡，序列化放法可采用qs.stringify()或者自己写方法

　Promise封装ajax

export default function ajax(url='', data={}, type='GET') {
  return new Promise(function(resolve, reject) {
    let promise
    if(type === 'GET') {
      //准备url query 参数数据
      let dataStr = '' //数据拼接字符串
      Object.keys(data).forEach(key => {
        dataStr += key + '=' + data[key] + '&'
      })
      if(dataStr !== '') {
        dataStr = dataStr.substring(0, dataStr.lastIndexOf('&'))
        url = url + '?' + dataStr
      }
      //发送get请求
      promise = axios.get(url)
    }else {
      //发送post请求
      promise = axios.post(url, data)
    }

    promise.then(response => {
      resolve(response.data)
    })
    .catch(error => {
      reject(error)
    })
  })
}