vue 中axios的封装和使用

梦里梦外; 2022-12-21 00:42 206阅读 0赞

**axios的介绍**  
在vue项目中，发送请求获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他可以配置拦截请求和响应、取消请求、转换json、客户端防御cSRF等。  
**安装**  
npm install axios; // 安装axios复制代码  
**引入**  
一般我会在项目的src目录中，utilis文件夹下创建request.js文件用来封装我们的axios，api文件夹下的js用来统一管理我的接口。（文件夹路径按个人习惯来）。  
**引入和创建axios,axios里边的配置也可单独设置，下边有代码说明**

import axios from 'axios'
    import {  Message } from 'element-ui'
    
    const service = axios.create({ 
      baseURL: process.env.BASE_API, // api 的 base_url
      timeout: 5000, // 设置请求超时
      headers: { 
        'Content-type': 'application/json'
      }
    })

**设置请求的url**  
axios.defaults.baseURL可以设置axios的默认请求地址,可以根据你的需要，来切换url.

axios.defaults.baseURL = 'https://www.production.com';

**设置请求超时**  
通过axios.defaults.timeout设置默认的请求超时时间。例如超过了5s，就会告知用户当前请求超时，请刷新等。

axios.defaults.timeout = 5000;

**post请求头的设置**  
post请求的时候，我们需要加上一个请求头，所以可以在这里进行一个默认的设置，即设置post的请求头为application/x-www-form-urlencoded;charset=UTF-8

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

**请求拦截**  
我们在发送请求前可以进行一个请求的拦截，我这里列举的是需要在请求上统一加上当前的token做验证，具体要做的可以根据你项目要求，也可以不设置拦截。  
请求拦截器

axios.interceptors.request.use(    
        config => {         
            // 每次发送请求之前判断vuex中是否存在token 
            // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况
            // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断 
            const token = store.state.token;        
            token && (config.headers.Authorization = token);        
            return config;    
        },    
        error => {         
            return Promise.error(error);    
    }

**响应的拦截**  
响应拦截器很好理解，就是服务器返回给我们的数据，我们在拿到之前可以对他进行一些处理。例如上面的思想：如果后台返回的状态码是200，则正常返回数据，否则的根据错误的状态码类型进行一些我们需要的错误，其实这里主要就是进行了错误的统一处理和没登录或登录过期后调整登录页的一个操作。我这里列举了http不同状态码对应的提示。

service.interceptors.response.use(response => { 
      return response
    }, err => { 
      if (err && err.response) { 
        switch (err.response.status) { 
          case 400:
            err.message = '错误请求'
            break
          case 401:
            err.message = '未授权，请重新登录'
            break
          case 403:
            err.message = '拒绝访问'
            break
          case 404:
            err.message = '请求错误,未找到该资源'
            break
          case 405:
            err.message = '请求方法未允许'
            break
          case 408:
            err.message = '请求超时'
            break
          case 500:
            err.message = '服务器端出错'
            break
          case 501:
            err.message = '网络未实现'
            break
          case 502:
            err.message = '网络错误'
            break
          case 503:
            err.message = '服务不可用'
            break
          case 504:
            err.message = '网络超时'
            break
          case 505:
            err.message = 'http版本不支持该请求'
            break
          default:
            err.message = `连接错误${ err.response.status}`
        }
      } else { 
        err.message = '连接到服务器失败'
      }
      //这里抛出信息用的是引入的Message
      Message({ 
        message: err.message,
        type: 'error',
        duration: 5 * 1000
      })
      return Promise.resolve(err.response)
    })

**封装get方法和post方法**

get方法：我们通过定义一个get函数，get函数有两个参数，第一个参数表示我们要请求的url地址，第二个参数是我们要携带的请求参数。get函数返回一个promise对象，当axios其请求成功时resolve服务器返回 值，请求失败时reject错误值。最后通过export抛出get函数。

/** * get方法，对应get请求 * @param {String} url [请求的url地址] * @param {Object} params [请求时携带的参数] */
    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模块来序列化我们的参数。如果没有序列化操作，后台是拿不到你提交的数据的。

/** * 封装post请求 * @param url * @param data * @returns {Promise} */
    import QS from 'qs'
     export function post(url,data = { }){ 
       return new Promise((resolve,reject) => { 
         axios.post(url, QS.stringify(data）)
              .then(response => { 
                resolve(response.data);
              },err => { 
                reject(err)
              })
       })
     }

这里有个小细节说下，axios.get()方法和axios.post()在提交数据时参数的书写方式还是有区别的。区别就是，get的第二个参数是一个\{\}，然后这个对象的params属性值是一个参数对象的。而post的第二个参数就是一个参数对象。

**api文件夹下js的使用**

import request from "@/utils/request ";
    const api= {  
     	// get请求列表 
        list () {         
            return request .get(`${ base.sq}/topics`);    
        },       
        // post提交 
        login (params) {         
            return request .post(`${ base.sq}/accesstoken`, qs.stringify(params));    
        }
    }
    export default api

**或者直接使用axios,参数，接口地址，根据需要直接传递进来**

import request from "@/utils/request ";
    export function getUserPowers(data,url, header) { 
    	return request({ 
    		url:url,//url地址
    		method: 'post',
    		headers: header,
    		data
    	})
    }
    }

写在最后，如有问题欢迎留言~~