微信小程序mpvue中封装axios(js或ts适用)
微信小程序mpvue中封装axios(js或ts适用)mpvue完整模板项目可见github链接:mpvue2-typescript-axios1.安装axios$ npm install axios2.封装axios:此为大致示例,可根据具体情况增加配置敲黑板!划重点!由于微信小程序需要用微信官方请求接口 wx.request,因此需要用adapter自定义还有一些上传下载等操...
·
微信小程序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
});
}
}
更多推荐
已为社区贡献2条内容
所有评论(0)