mpvue封装axios实现数据的请求

 第一步：下载axios

npm install --save axios

第二步：更改axios的文件：路径：
ode_modulesaxiosdistaxios.js

//将这段代码隐藏，使用自定义的adapter

axios.all = function allpromises) {
	  return Promise.allpromises);
};

　第三步：在utils文件底下创建axios.js文件

import axios from 'axios'
import Qs from 'qs'
// 时间戳
// const NewTimeStamp = new Date).getTime)
// 定义请求类
class HttpRequest {
  constructor baseUrl = baseURL) {
    this.baseUrl = baseUrl
    this.queue = {}
  }
  getInsideConfig ) {
    const config = {
      baseURL: this.baseUrl,
    }
    return config
  }
  // 小程序自定义处理请求
  adapter instance) {
    instance.defaults.timeout = 30000
    instance.defaults.adapter = function config) {
      return new Promiseresolve, reject) => {
        // console.logconfig,'adapter')
        let data = config.method === 'get' ? config.params : Qs.stringifyObject.assignJSON.parseconfig.data),vertifyData)))
        // wx小程序 发起请求相应 log 就可以看到熟悉的返回啦
        // console.logtypeof config.data, config, data)
        wx.request{
          url: config.url,
          method: config.method,
          data: data,
          header: {
            'content-type': 'application/x-www-form-urlencoded;charset=UTF-8' // 默认值
          },
          success: res) => { 

　　　　　　　　return resolveres.data)

            },
          fail: err) => { return rejecterr) }
        })
      })
    }
  }
  distroy url) {
    delete this.queue[url]
    if !Object.keysthis.queue).length) {
      // Spin.hide)
    }
  }
  // 拦截器
  interceptors instance, url) {
    // 请求拦截
    instance.interceptors.request.useconfig => {
      // 添加全局的loading...
      if !Object.keysthis.queue).length) {
        // Spin.show) // 不建议开启，因为界面不友好
      }
      this.queue[url] = true
      // 统一拦截添加token
      config.params = {}
      // config.params.token = getToken)
      return config
    }, error => {
      return Promise.rejecterror)
    })
    // 响应拦截
    instance.interceptors.response.useres => {
      this.distroyurl)
      const { data, status } = res
      // 接口token过期处理
      // if res.data.Code === -202) {
      //   router.push{ name: 'login', params: { failure: true } })
      //   // return Promise.rejectnew Errorres.data.Message).message)
      // }
      return { data, status }
    }, error => {
      this.distroyurl)
      return Promise.rejecterror)
    })
  }
  // 请求开始
  request options) {
    const instance = axios.create)
    const configInfo = this.getInsideConfig)
    this.adapterinstance)
    options.url = this.getInsideConfig).baseURL + options.url
    options = Object.assignthis.getInsideConfig), options)
    this.interceptorsinstance, options.url)
    return instanceoptions)
  }
}
export default HttpRequest

第四步：在utils文件底下创建request.js文件

import HttpRequest from '@/utils/axios'
const configBaseUrl={
  dev: 'https://www.****.com',
  pro: 'http://127.0.0.1:8080'
}
const baseUrl = process.env.NODE_ENV === 'development' ? configBaseUrl.dev : configBaseUrl.pro

const axios = new HttpRequestbaseUrl)
export default axios

第五步：使用axios请求数据

//mobileGetCourseList是请求的地址，例如/api/web/course/list

axios.request{
      url: mobileGetCourseList,
      method: 'post',
      data: {},
    }).thenresponse => {
      console.logresponse)
    })