Vue中使用axios

基本API

1. 执行get请求，有两种方式

// 第一种方式  将参数直接写在url中
axios.get('/getMainInfo?id=123')
.then((res) => {
  console.log(res)
})
.catch((err) => {
  console.log(err)
})
// 第二种方式  将参数直接写在params中
axios.get('/getMainInfo', {
  params: {
    id: 123
  }
})
.then((res) => {
  console.log(res)
})
.catch((err) => {
  console.log(err)
})

2. 执行post请求，注意执行post请求的入参，不需要写在params字段中，这个地方要注意与get请求的第二种方式进行区别。

axios.post('/getMainInfo', {
  id: 123
})
.then((res) => {
  console.log(res)
})
.catch((err) => {
  console.log(err)
})

6. 拦截器

(1)在请求之前拦截请求

  // axios请求拦截
  axios.interceptors.request.use( config => {
    //  为请求头对象，添加Token 验证的 Authorization 字段
    config.headers.Autorization = window.sessionStorage.getItem('token')
    return config
  })

(2)在请求收到回复后拦截

axios.interceptors.response.use(config => {
  NProgress.done()
  return config
})

通用二次封装

import Vue from 'vue'
import axios from 'axios'
import {Toast} from 'vant'
Vue.use(Toast);

const devBaseUrl = '';
const proBaseUrl = '';
let url;
process.env.NODE_ENV === 'development' ? url = devBaseUrl : url = proBaseUrl ;

const service = axios.create({
  baseURL: url,
  // timeout: 5000,
  headers: {
    'Content-Type': 'application/json;charset=utf-8'
  }
})

service.interceptors.request.use(config=>{
  config.headers['token'] =   window.localStorage.getItem('token') || ''
  return config;
})

service.interceptors.response.use(responese => {
    return responese;
  },
  error => {
    if (error.message.includes('timeout')) { // 判断请求异常信息中是否含有超时timeout字符串
      Toast.fail('网络连接超时');
      return  // reject这个错误信息
    }
    if (error.message.includes('500')){
      Toast.fail('网络异常');
      return ; // reject这个错误信息
    }
    return Promise.reject(error);
  }
)