第一步：
安装axios
$ npm i axios -S
第二步：
建立一个名为httpRequest的js文件，然后封装axios
/*
* @Author: wujiayi
* @Date: 2019-08-13
* @Last Modified by: wujiayi
* @Last Modified time: 2019-08-13
*/
import axios from 'axios';
import store from '../store/index';
/*
*配置域名。由于小程序无法识别运行环境因此不能使用环境常量process.env.NODE_ENV
*/
axios.defaults.baseURL = 'xxx';
/**
* axios配置
*/
// axios请求拦截器
axios.interceptors.request.use(config => {
//to do something...
if (store.state.showLoading) {
mpvue.showLoading({
title: '加载中',
mask: true
});
}
return config;
}, error => {
mpvue.showToast({icon:'none',title:'网络繁忙,请稍后重试'});
return Promise.reject(error);
})
// axios响应拦截器
axios.interceptors.response.use(data => {
//to do something...
mpvue.hideLoading();
return data;
}, error => {
mpvue.showToast({icon:'none',title:'网络繁忙,请稍后重试'});
return Promise.reject(error);
})
//axios自定义请求
axios.defaults.adapter = function (config) {
return new Promise((resolve, reject) => {
mpvue.request({
url: config.url,
data: config.params,
method:config.method,
header:{
token:'xxx'
},
success:(res)=>{
return resolve(res.data);
},
fail:(res)=> {
return reject(res.data);
}
})
})
}
/**
* url:请求地址
* params:请求参数
* mthods:请求方法
* showStatus:是否需要展示loading
* */
export default async(url,params,method,showStatus=true) => {
store.commit('SHOWLOADING',showStatus);
try {
const response = await axios(url, {params,method});
return response;
} catch(error) {
throw new Error(error);
}
}
第三步：
建立一个名为getData的js的文件，用来存放请求接口，便于统一管理
/*
* @Author: wujiayi
* @Date: 2019-08-13
* @Last Modified by: wujiayi
* @Last Modified time: 2019-08-13
*/
import Http from './httpRequest';
export const getData = (params)=> Http( 'xxx',params,'get',false);
第四步：
在页面中引入接口文件并且使用接口请求
import { getData } from "@/utils/getData";
//to do something...
methods:{
async getDataList(){
let res = await getData({参数A,参数B...});
console.log(res);
//to do something...
},
}
注：由于小程序无法识别运行环境因此不能使用环境常量process.env.NODE_ENV
参考文章链接 ：https://blog.csdn.net/weixin_38644883/article/details/84971955
