mpvue之axios请求封装

第一步：

安装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