在vue里面使用简单封装的axios和拦截器的使用-个人笔记

简单封装自己的axios

首先先创建自己的index.js文件

然后下载包

npm install --save axios （axios包）

npm install --save qs (进行序列化post请求的)

1.进行环境切换配置，切换生产或者说是测试的环境

先在根目录创建.env.production和.env.development文件

我的判断方式是判断各自文件里面的NODE_ENV等于什么而进行切换的

//.env.development文件
NODE_ENV=development   //别用引号引起来
//.env.production
NODE_ENV=production   //别用引号引起来

2.开始配置index.js文件

首先，先引入包

import axios from 'axios' //引入axios
import qs from 'qs' //引入qs模块，用来序列化post类型的数据

第二，进行环境的切换

//切换环境，切换url前缀，自己看自己的项目是怎么样的环境进行切换
if (process.env.NODE_ENV == 'development') {
    axios.defaults.baseURL = 'http://127.0.0.1:300'
} else if (process.env.NODE_ENV == 'production') {
    axios.defaults.baseURL = 'http://127.0.0.1:3000'
}

第三，开始设置请求时间以及请求头

axios.defaults.timeout = 10000; //设置请求超时，10秒
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'; //设置post请求的请求头

第四，封装自己的get和post请求,这里仅仅是封装post和get的请求，其他的请求可以参考axios的文档

let $Api = {
    // 封装get请求
    /**
     * get方法，对应的是get请求
     * @param {String} url （请求的url地址）
     * @param {Object} params （请求参数）
     */
    get: function (url, params) {
        return new Promise((resolve, reject) => {
            axios.get(url, {
                params: params
            }).then(res => {
                resolve(res.data)
            }).catch(err => {
                reject(err.data)
            })
        })
    },

    // 封装post请求
    /**
     * post方法，对应的是post请求
     * @param {String} url （请求的url地址）
     * @param {Object} params （请求参数）
     */
    post: function (url, params) {
        return new Promise((resolve, reject) => {
            axios.post(url, qs.stringify(params))
                .then(res => {
                    resolve(res.data)
                })
                .catch(err => {
                    reject(err)
                })
        })
    }
}

使用方式，直接挂载在全局变量里面

在main.js里面进行操作

//引入文件
import Vue from 'vue'
import $Api from './Api/index';//自己文件的路径
//挂载在Vue上面
Vue.prototype.$Api = $Api

在其他页面进行使用的时候

this.$Api.get('www.baidu.com',{params:params})
.then(res=>{
    console.log(res)
})
this.$Api.post('www.baidu.com',{params:params})
.then(res=>{
    console.log(res)
})

关于拦截器

首先先创建自己的request.js文件

然后下载包

npm install --save axios （axios包）

npm install --save qs (进行序列化post请求的)

第一步：引入文件

import axios from 'axios' //引入axios
import qs from 'qs' //引入qs模块，用来序列化post类型的数据

第二步：创建一个axios实例，并且设置超时或者说baseUrl

设置baseUrl的方式

//创建一个实例，并且设置baseUrl和请求超时时间
var instance = axios.create({ 
	timeout: 10000,
	baseUrl:'https://'//请求前缀
});

使用.env的方式

//使用此方式，需要对.env.production和.env.development两个文件进行配置
if (process.env.NODE_ENV == 'development') {
    axios.defaults.baseURL = 'http://127.0.0.1:3000'
} else if (process.env.NODE_ENV == 'production') {
    axios.defaults.baseURL = 'http://127.0.0.1:3000'
}

第三步：进行配置（在官网可以拿到，一个请求前，一个请求获取参数）

instance.interceptors.request.use(
  function(config) {
     // 在此处可以获取到请求方式（post,get）config.method
     // 如果是post请求的话，参数就要进行序列化，这就是为什么需要引入qs
     // 获取请求参数config.data
     // 还有其他业务就要看自己的需求了
      if(config.method == 'post'){
          config.data = qs.stringify(config.data)
      }
    return config;
  },
  function(error) {
    return Promise.reject(error);
  }
);

instance.interceptors.response.use(
  function(response) {
      //这里能获得请求回应数据，可以用来做路由重定向之类的
      //response.config.url 获取请求的路径
    return response;
  },
  function(error) {
    return Promise.reject(error);
  }
);

第四步：导出

export default instance;

第五步：挂载

在main.js引入并且挂载在全局变量里面

//引入文件
import Vue from 'vue'
import request from './Api/request';//自己文件的路径
//挂载在Vue上面
Vue.prototype.$request = request

第六步：使用

 this.$requests({ url: "www.baidu.com", methods: "get" }).then((res) => {
      console.log(res);
 })