安装

npm install qs 
npm install axios

引入

import axios from 'axios'
import Router from '../router/index'
import qs from 'qs'
import { Dialog } from 'vant';
// 引入url
const baseUrl = 'HTTPS:****'

文档

大家在开始配置的时候；可以先去看一哈官方文档；这样容易上手许多

拦截器

官方的解释是：你可以在请求和响应以前拦截它们并进行处理；

简单理解一哈：如果返回参数为1003表示登录过期，那么我们就可以在响应器中进行拦截处理达到自己想要的效果，如跳转到登录页面；

//拦截器；针对发送请求以前做的处理
axios.interceptors.request.use(function (config) {
  console.log(config);
  // Do something before request is sent
  return config;
}, function (error) {
  console.log(error);
  // Do something with request error
  return Promise.reject(error);
});

// 响应器；请求数据返回以后的处理
axios.interceptors.response.use(function (response) {
  // Do something with response data
  let res = response.data

  switch (res.code*1) {
    case 1003:
      Dialog.confirm({
        title: '登录已过期',
        message: '很抱歉，登录已过期，请重新登录',
      })
        .then(() => {
          // on confirm
          console.log('confirm');
          Router.replace({name:'Home'}) // 跳转到登录页面
        })
        .catch(() => {
          // on cancel
          console.log('cancel');
        });
      break;
    case -1:
      Dialog.alert({
        title: '登录已过期',
        message: res.msg,
      })
        .then(() => {
          // on confirm
          console.log('confirm');
        })
      break;
  
    default:
      break;
  }

  return response;
}, function (error) {
  // Do something with response error
  return Promise.reject(error);
});

初始化请求头

// 添加请求头；根据需求配饰即可
let headers = {
  'Content-Type': 'application/x-www-form-urlencoded',
  'Terminal-Type': 'innerH5'
}

请求方式处理

// 请求方式配置不同的处理
  if(method){
    method = method.toUpperCase() // 转为大写字母
    if(method == 'GET') { // 如果是get请求的处理
      // console.log(132); 
    }else if(method == 'POST'){ // 如果是post请求的处理
      headerPost = {
        'Content-Type': 'application/x-www-form-urlencoded',
      }
      data = qs.stringify(data) // 在post中处理数据序列化
    }
  }

完整版

import axios from 'axios'
import Router from '../router/index'
import qs from 'qs'
import { Dialog } from 'vant';
// url
const baseUrl = 'HTTPS://devapi.ulinkmall.com'

// 添加请求头；根据需求配饰即可
let headers = {
  'Content-Type': 'application/x-www-form-urlencoded',
  'Terminal-Type': 'innerH5'
}
//拦截器；针对发送请求以前做的处理
axios.interceptors.request.use(function (config) {
  console.log(config);
  // Do something before request is sent
  return config;
}, function (error) {
  console.log(error);
  // Do something with request error
  return Promise.reject(error);
});

// 响应器；请求数据返回以后的处理
axios.interceptors.response.use(function (response) {
  // Do something with response data
  let res = response.data

  switch (res.code*1) {
    case 1003:
      Dialog.confirm({
        title: '登录已过期',
        message: '很抱歉，登录已过期，请重新登录',
      })
        .then(() => {
          // on confirm
          console.log('confirm');
          Router.replace({name:'Home'}) // 跳转到登录页面
        })
        .catch(() => {
          // on cancel
          console.log('cancel');
        });
      break;
    case -1:
      Dialog.alert({
        title: '登录已过期',
        message: res.msg,
      })
        .then(() => {
          // on confirm
          console.log('confirm');
        })
      break;
  
    default:
      break;
  }

  return response;
}, function (error) {
  // Do something with response error
  return Promise.reject(error);
});

// 创建一个函数
const request = (params)=>{
  // let _self = this
  let headerPost = {}
  let url = params.url;
  let method = params.method || 'GET';
  let data = params.data;

  // 配置token请求；可以根据实际需求进行判断
  let token = localStorage.getItem('token')
  if(!token){
    Router.replace({name:'Home'}) // 跳转到登录页面
  }else {
    data = Object.assign({},data,{token:token}) // 合并参数
  }

  // 请求方式配置不同的处理
  if(method){
    method = method.toUpperCase() // 转为大写字母
    if(method == 'GET') { // 如果是get请求的处理
      // console.log(132); 
    }else if(method == 'POST'){ // 如果是post请求的处理
      headerPost = {
        'Content-Type': 'application/x-www-form-urlencoded',
      }
      data = qs.stringify(data) // 在post中处理数据序列化
    }
  }

  // 同过 Promise 封装一个请求接口
  return new Promise((resolve,reject)=>{
    axios({
      url:baseUrl + url,
      method:method,
      data:data,
      header:Object.assign({},headers,headerPost)
    })
    .then(res=>{
      resolve(res.data)
    })
    .catch(err=>{
      reject(err)
    })
    .finally(()=>{
      console.log('不管是否成功都要执行');
    })
  })
}

// 暴露出去
export default request

使用

封装接口

新建一个api.js文件

import request from './request'

// 获取楼层
export function getLouCe(params){
  return request({
    url:'/open/weal.p_index/floorList',
    method:'GET',
    data:params
  })
}

export function getCartProducts(){
    return request({
        url:'/open/weal.p_cart/index',
        method:'POST'
    })
}

组件中使用

function fn(){
    getCartProducts().then(res=>{
      console.log(res);
  })
}

大家可以根据自己的需求进行增加和修改