mpvue小程序笔记2 --- 发送网络请求

1.安装axios

npm install axios

2.找到以下路径中文件路径> node_modules > axios > dist > axios.js注释代码块 , 并替换：

axios.all = function all(promises) {
 return Promise.all(promises);
};

// ------------------ 在它下面 替换为 ---------------------------
axios.defaults.adapter = function (config) {
    return new Promise ((resolve, reject) => {
        console.log('自定义请求：',config)
    })
}

3.在webpack.base.config.js文件中找到resolve>alias,为axios添加别名

 resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue': 'mpvue',
      'axios' : 'axios/dist/axios', // 使用axios
      '@': resolve('src')
    },
    symlinks: false,
    aliasFields: ['mpvue', 'weapp', 'browser'],
    mainFields: ['browser', 'module', 'main']
  },

4.最后在main.js文件中配置全局

import Vue from 'vue'
import App from './App'
// 网络请求
import axios from 'axios'
import qs from 'qs'

// 网络路径
const baseUrl = process.env.NODE_ENV === 'development' ? 'https://开发环境路径' : 'https://生产环境路径'
axios.defaults.timeout = 30000
axios.defaults.baseURL = baseUrl
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
axios.defaults.adapter = function (config) {
  return new Promise((resolve, reject) => {
    let data = config.method === 'get' ? config.params : qs.stringify(config.data)
    // wx小程序 发起请求相应 log 就可以看到熟悉的返回
    wx.request({
      url: config.url,
      method: config.method,
      data: data,
      success: (res) => {
        return resolve(res)
      },
      fail: (err) => {
        return reject(err)
      }
    })
  })
}

// 请求拦截器
axios.interceptors.request.use(function (request) {
    // request.headers.token = 'token=11124654654687';
    // console.log(request) // 请求成功
    return request
  }, function (error) {
    // console.log(error); // 请求失败
    return Promise.reject(error)
  })
  
  // 添加响应拦截器
  axios.interceptors.response.use(function (response) {
    console.log(response.data.data) // 响应成功
    return response
  }, function (error) {
    // console.log(error); // 响应失败
    return Promise.reject(error)
  })
  // 全局声明 --- 调用 axios
  Vue.prototype.$axios = axios

// -------------- 系统默认的 -------------------
Vue.config.productionTip = false
App.mpType = 'app'

const app = new Vue(App)
app.$mount()

5.安装一下：

npm i

简书：光明程辉