微信小程序mpvue中封装axios(js或ts适用)

微信小程序mpvue中封装axios(js或ts适用)

mpvue完整模板项目可见github链接：mpvue2-typescript-axios

1.安装axios

$ npm install --save axios 

2.封装axios：

此为大致示例，可根据具体情况增加配置
敲黑板！划重点！
由于微信小程序需要用微信官方请求接口 wx.request，因此需要用adapter自定义
还有一些上传下载等操作微信也需要调用微信官方相关接口

//axios.js文件
//注意这里需这么导入，否则可能报错
import axios from '../../node_modules/axios/dist/axios'
// 时间戳
//const NewTimeStamp = new Date().getTime()

// axios全局设置
const Axios = axios.create({
 baseURL: process.env.BASE_API,
 timeout: 1000 * 60 * 10,
 responseType: 'json'
})

// axios.defaults.timeout = 30000
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'

//划重点！ 由于微信小程序需要用微信官方请求接口，因此需要用adapter自定义
Axios.defaults.adapter = function (config) {
// let baseURL = process.env.BASE_API
// 发交易之前显示加载中
wx.showLoading({
 title: '拼命加载中...'
})
return new Promise((resolve, reject) => {
 wx.request({
   url: config.url,
   method: config.method,
   data: config.params,
   success: (res) => {
     return resolve(res)
   },
   fail: (err) => {
     return reject(err)
   },
   complete: res => {
     wx.hideLoading()
     // TODO:
     }
   })
 })
}

// axios请求拦截
Axios.interceptors.request.use(
 config => {
 // 若是有做鉴权token , 就给头部带上token
 // let token = window.sessionStorage.getItem(__TOKEN_KEY__)
 // if (token) {
 //   config.headers.Authorization = `Bearer ${token}`
 // }
   return config
 },
 error => {
   sendError(error)
   return Promise.reject(error.data)
 }
)

// axios 响应拦截，对响应的状态处理
Axios.interceptors.response.use(
//   function (response) {
//     console.log(response.data.data) // 响应成功
//     return response
//   },
//   function (error) {
//     // console.log(error); //响应失败
//     return Promise.reject(error)
//   })
 res => {
 // 200,204为处理成功
 //注意这里statusCode有可能微信的ts声明文件里未定义，需要去声明文件里定义一下
   if ([200, 204].indexOf(res.statusCode) === -1) {
     console.log('res.status', res)
     sendError(res)
     return Promise.reject(res.data)
   }
   return res
 },
 error => {
   sendError(error)
   return Promise.reject(error)
 })
 
//封装fetch并暴露
export function fetch (options) {
 return new Promise((resolve, reject) => {
   Axios(options)
     .then(response => {
       resolve(response)
     })
     .catch(error => {
       reject(error)
     })
 })
}
/**
* 此处为捕获到的异常，可以将此异常提交给Vuex的Store或者使用微信组件弹出
*
* @param {any} error
*/
function sendError (error) {
 let type = new Date().getMilliseconds()
 let data = []
 var msg = '发生错误'
 console.log(msg)
 if (error.data) {
   data = error.data.errors
   msg = error.data.message
 } else if (error.response) {
   data = error.response.data
   msg = data.message
 } else {
   msg = error.message
 }
 let errorData = {
   type,
   data,
   message: msg
 }
 console.log(errorData)
 // 1。store.dispatch('error/appendError', errorData)
 // 2。弹出
 wx.showToast({
   title: errorData.message,
   icon: 'none',
   duration: 3000,
   complete: (res) => {
   }
 })
}

3.api接口里调用示例：

此为Typescript示例

//exampleAPI.ts
//导入axios.js文件
import { fetch } from "../utils/axios";
//暴露此类
export class ExampleAPI{
 // baseApi = process.env.BASE_API;
//  baseService = process.env.BASE_SERVICE;
  //get请求
  getAPI(data) {
   return fetch({
     url: 'XXX/XXXXX',
     method: "get",
     params: data
    });
  }
  //post请求
  postAPI(data) {
   return fetch({
     url: 'XXX/XXXXX',
     method: "post",
     params: data
    });
  }
}