mpvue的使用（三）封装axios

最新推荐文章于 2024-07-20 21:05:24 发布

筱歌儿

最新推荐文章于 2024-07-20 21:05:24 发布

阅读量426

点赞数

分类专栏：小程序文章标签： ajax vue.js

本文链接：https://blog.csdn.net/shelter123456/article/details/105363796

版权

小程序专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1.安装axios

npm i axios -S

2.建立一个名为httpRequest的js文件，然后封装axios

import axios from 'axios';
import store from '../store/index'
//配置域名。由于小程序无法识别运行环境因此不能使用环境常量process.env.NODE_ENV
axios.defaults.baseURL = 'xxx';
// http请求拦截器
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)
})
// http响应拦截器
axios.interceptors.response.use(data => { 
    mpvue.hideLoading();    
    return data
}, error => {
    mpvue.showToast({icon:'none',title:'网络繁忙,请稍后重试'});
    return Promise.reject(error)
})
 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
      },
      //   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) => {
    showStatus && store.commit('SHOWLOADING',showStatus);
    try {
        const response = await axios(url, {params,method});
        return response;
    } catch(error) {
        throw new Error(error)
    }
}

3.建立一个名为getData的js的文件，用来存放请求接口，便于统一管理

import Http from './httpRequest'
let serverURL =  'xxx' //接口域名
export const getData = params => Http("/xx/xx", params, false);

4.在页面中引入接口文件并且使用接口请求

import { getData } from "@/utils/getData"
methods:{
  getDataList(){
      getData({
          token:token
      }).then(res=>{
          
      }).catch(err=>{
          
      })
  }
}