本文共 2420 字，大约阅读时间需要 8 分钟。

安装axios并封装http请求

在项目中首先需要安装axios库，将其作为依赖项添加到项目中。可以通过以下命令完成安装：

npm install axios --save

接下来，我们需要创建一个名为 httpRequest.js 的文件，将axios封装起来，并进行相关配置。这样可以统一管理http请求，避免在各个页面中重复配置。

import axios from 'axios';import store from '../store/index';// 配置域名，注意：由于小程序无法识别运行环境，因此不能使用环境常量process.env.NODE_ENVaxios.defaults.baseURL = 'http://your-domain.com';// 请求拦截器axios.interceptors.request.use(config => {    if (store.state.showLoading) {        mpvue.showLoading({            title: '加载中',            mask: true        });    }    return config;}, error => {    mpvue.showToast({        icon: 'none',        title: '网络繁忙，请稍后重试'    });    return Promise.reject(error);});// 响应拦截器axios.interceptors.response.use(data => {    mpvue.hideLoading();    return data;}, error => {    mpvue.showToast({        icon: 'none',        title: '网络繁忙，请稍后重试'    });    return Promise.reject(error);});// 配置axios的adapter，适用于小程序环境axios.defaults.adapter = function(config) {    let params1 = JSON.stringify(config.params);    return new Promise((resolve, reject) => {        mpvue.request({            url: config.url,            method: "POST",            data: {                data: params1            },            success: res => {                return resolve(res.data);            },            fail: res => {                return reject(res.data);            }        });    });};/** * 配置的http请求方法 * @param url 请求地址 * @param params 请求参数 * @param method 请求方法 * @param showStatus 是否需要显示loading状态，默认为true */export default async (url, params, method, showStatus = true) => {    showStatus && store.commit('SHOWLOADING', showStatus);    try {        const response = await axios(url, {            params,            method        });        return response;    } catch (error) {        throw new Error(error);    }};

创建接口文件

为了便于管理接口，可以创建一个名为 getData.js 的文件，将各个接口统一存放在这里：

import Http from './httpRequest';import store from '../store/index';// 配置接口域名const serverURL = 'http://your-domain.com';// 接口封装export const getData = (params, showLoading = true) => {    return Http(`${serverURL}/api/${params.path}`, params, false, showLoading);};

在页面中使用接口

在需要使用接口的页面中，先引入接口文件：

import {getData} from '@/utils/getData';

然后在方法中调用接口：

methods: {    getDataList() {        return getData({            token: token        }).then(res => {            // 处理成功回调        }).catch(err => {            // 处理错误回调        });    }}

这样通过封装接口，可以统一管理http请求，简化代码维护，同时也可以根据实际需求进行扩展和配置。

转载地址：http://btffk.baihongyu.com/