Vue的axios封装

1.引入

npm i axios

1）在src目录中创建一个request文件夹，创建request.js文件封装axios的全局变量、拦截器等；创建api.js管理具体接口

在request.js文件中
import axios from ‘axios’
import QS from ‘qs’ //引入qs模块，用来序列化post类型的数据
import {Toast} from ‘vant’ //引入vant组件的toast提示框组件

2）环境的切换，切换开发环境、测试环境和生产环境，使用axios.defaults.baseURL可以设置axios的默认请求地址

3）通过axios.defaults.timeout设置默认的请求超时时间

axios.defaults.timeout = 10000;

4）请求拦截

// 添加请求拦截器
axios.interceptors.request.use( config =>{
    //每次发送请求前判断token，存在就在header加上token，果然过期所以在响应拦截器中要对返回状态进行判断
    const token = localStorage.token; 
    token && (config.headers.Authorization = token);
    return config;
  }, error =>{
    // 对请求错误做些什么
    return Promise.reject(error);
  });

5）响应的拦截,服务器返回给我们的数据，我们在拿到之前可以对他进行一些处理

// 响应拦截器
axios.interceptors.response.use( 
 response => { 
 // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据 
 // 否则的话抛出错误
 if (response.status === 200) {  
  return Promise.resolve(response); 
 } else {  
  return Promise.reject(response); 
 } 
 }, 
 // 服务器状态码不是2开头的的情况
 // 这里可以跟你们的后台开发人员协商好统一的错误状态码 
 // 然后根据返回的状态码进行一些操作，例如登录过期提示，错误提示等等
 // 下面列举几个常见的操作，其他需求可自行扩展
 error => {  
 if (error.response.status) {  
  switch (error.response.status) {  
  // 401: 未登录
  // 未登录则跳转登录页面，并携带当前页面的路径
  // 在登录成功后返回当前页面，这一步需要在登录页操作。  
  case 401:   
   router.replace({   
   path: '/login',   
   query: { 
    redirect: router.currentRoute.fullPath 
   }
   });
   break;

  // 403 token过期
  // 登录过期对用户进行提示
  // 清除本地token和清空vuex中token对象
  // 跳转登录页面  
  case 403:
   Toast({
   message: '登录过期，请重新登录',
   duration: 1000,
   forbidClick: true
   });
   // 清除token
   localStorage.removeItem('token');
   store.commit('loginSuccess', null);
   // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面 
   setTimeout(() => {   
   router.replace({    
    path: '/login',    
    query: { 
    redirect: router.currentRoute.fullPath 
    }   
   });   
   }, 1000);   
   break;

  // 404请求不存在
  case 404:
   Toast({
   message: '网络请求不存在',
   duration: 1500,
   forbidClick: true
   });
   break;
  // 其他错误，直接抛出错误提示
  default:
   Toast({
   message: error.response.data.message,
   duration: 1500,
   forbidClick: true
   });
  }
  return Promise.reject(error.response);
 }
 } 
});

6）封装get方法和post方法

封装get方法

export function get(url, params){ 
	 return new Promise((resolve, reject) =>{ 
		 axios.get(url, {  
		  	params: params 
		 }).then(res => {
		  	resolve(res.data);
		 }).catch(err =>{
		  	reject(err.data) 
		 }) 
	});
}

封装post方法,post方法必须要使用对提交从参数对象进行序列化的操作，所以这里我们通过node的qs模块来序列化我们的参数,所有使用import QS from ‘qs’

/** 
 * post方法，对应post请求 
 * @param {String} url [请求的url地址] 
 * @param {Object} params [请求时携带的参数] 
 */
export function post(url, params) {
	 return new Promise((resolve, reject) => {
		 axios.post(url, QS.stringify(params))
		 .then(res => {
			  resolve(res.data);
		 })
		 .catch(err =>{
		  	reject(err.data)
		 })
	 });
}

2.在api.js文件中管理接口

2-1）在api.js中引入我们封装的get和post方法

import { get, post } from ‘./http’

2-2）封装接口

export const apiAddress = params => post(‘地址’, params);

2-3）调用接口

import { apiAddress } from '@/request/api';// 导入我们的api接口

 // 调用api接口，并且提供了两个参数    
   apiAddress({     
    type: 0,     
    sort: 1    
   }).then( res=>{
		console.log(res)	
	})

站外资料:https://www.jb51.net/article/145341.htm