vue中axios封装

在vue项目中，我们经常是使用axios去与后台进行数据交互，axios是基于http的promise库。

1. 安装axios

npm install axios

2. 新建文件夹http,里面建立文件http.js,引入axios

import axios from 'axios'

3. 可以根据process.env.NODE_ENV判断开发的环境，比如development，production，不同的环境可以使用不同的请求域名等等。

4. 创建axios 及请求头

import systemConfig from './config'
var instance = axios.create({
    baseURL: systemConfig.apiUrl, // 公共接口url（如果有多个的公共接口的话，需要处理）
    timeout: 60000, // 请求超时 10s
});
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

5. 请求拦截

instance.interceptors.request.use(config => {
    let passport = localStorage.getItem('token');
    config.headers.Authorization = 'Bearer ' + passport
    return config;
  }, function (error) {
    return Promise.reject(error);
});

请求拦截是指发送请求之前进行操作。这里简单写了下逻辑，如果本地存有token，可以把token加载请求头里面，这样我们请求就会带有token，当然可以根据具体的项目需求，在header里面自己加其它的属性。

6. 响应拦截

instance.interceptors.response.use(
    response => response.status === 200 ? Promise.resolve(response) : Promise.reject(response),    
    error => {
      console.log('_______________',error.response)
    if (error.response.status == 401) {
        Toast('用户未登录');
    }else if(error.response.status == 403){
        Toast('登录过期，请重新登录');
    }else if(error.response.status == 404){
        Toast('网络请求不存在');
    }else{
        Toast('服务器请求错误')
    }
});

响应拦截指服务器返回了数据，我们拿到前对它进行处理。如果返回的是200，表示成功拿到数据，否则就要进行相应的错误统一处理。比如401，表示用户是没有登录的状态，这时候我们可以跳转到登陆页面，让用户去登陆。具体的状态码。可以和后台商量统一。

7. 封装get和post

//封装get
const get = function(url, params = {}){  
    return new Promise((resolve, reject) =>{        
        instance.get(url,{params:params}).then(res => {
            resolve(res.data);
        }).catch(err =>{
            reject(err.data)
        })    
    })
}
//封装post
const post = function(url, params = {}) {
    return new Promise((resolve, reject) => {
        instance.post(url, params)
         .then(res => {
            resolve(res.data);
         })
         .catch(err =>{
            reject(err.data)
         })
    });
}
export default {get,post,put}

一般请求的方式为get和post，当然也会用到put和delete等等。我们通过定义一个函数，函数有两个参数，第一个参数表示我们要请求的url地址，第二个参数是我们要携带的请求参数。返回一个promise对象，当axios其请求成功时resolve服务器返回 值，请求失败时reject错误值。最后通过export default 抛出get函数。
需要注意的是，get和post用法相似，只是参数的格式不一样。get是一个对象里面，有一个key params对应的值为对象，而post参数就是一个对象。

8. main.js引入

import instance from './http/http.js'
Vue.prototype.$http = instance

然后我们就可以在页面调用get和post请求了

   this.$http.get('xx/xx',params).then(res => {

  }).catch(err => {
    
  })

9. 有时候我们的项目请求的域名会不止一个，这个时候我们可以对api进行统一的管理、更加模块化。
   新建文件api.js，config里面域名修改

const apiUrl= {    
   url1: 'https://xxxx.com/',    
   url2: 'http://xxxxx.com/'
}
export default apiUrl

在api.js里面引入
import systemConfig from ‘./config’ // 导入接口域名列表
import axios from ‘./http.js’ // 导入http中创建的axios实例

const article = {    
    // 新闻列表    
    articleList () {        
        return axios.get(`${apiUrl.apiUrl.url1`, {            
            params: params        
        });    
    },    
    // 新闻详情,演示    
    articleDetail (id, params) {        
        return axios.get(`${apiUrl.apiUrl.url2}`, {            
            params: params        
        });    
    },
    // 其他接口…………
}
export default article

main.js引用

import api from './api' // 导入api接口
Vue.prototype.$api = api; // 将api挂载到vue的原型上复制代码

在页面调用：

   this.$api.article.articleDetail(id, {        
       api: 123      
   }).then(res=> {
       // 执行某些操作      
   }) .catch(()=>{
   
   })

以上就是对axios的简单使用，包括拦截器和get、post封装，api的模块化管理