动态Axios配置

时间  2019-11-20
标签 动态 axios 配置 繁體版
原文   原文链接
推荐使用Vue-cli工具来建立和管理项目，就算刚开始不熟悉，用着用着即可知晓其中的奥妙。前一段时间官方所推荐的数据请求插件仍是 Vue-resource，但如今已经变了，变成了 Axios,不用知道为何变了，反正这个用起来比那个好一些，用就是了，下面是一些封装 axios请求的一些经验，不对之处，还望多多指教！

01

建立文件，Vue项目初始化以后，在src目录下再建立一个util工具文件夹，通常就是用来存放一些封装的函数方法，如今让咱们在util文件目录下建立一个http.js文件，封装axios方法。css

02

直接上代码（常规版），代码中有详细的注释vue

import axios from 'axios' //引用axios
import {Promise} from 'es6-promise'   //引入Promise

// axios 配置
axios.defaults.timeout = 5000;  //设置超时时间
axios.defaults.baseURL = 'http://localhost:4000/api/v1/'; //这是调用数据接口

// http request 拦截器（全部发送的请求都要从这儿过一次），经过这个，咱们就能够把token传到后台，我这里是使用sessionStorage来存储token等权限信息和用户信息，若要使用cookie能够本身封装一个函数并import即可使用
axios.interceptors.request.use(
    config => {
        const token = sessionStorage.getItem("token"); //获取存储在本地的token
        config.data = JSON.stringify(config.data);
        config.headers = {
            'Content-Type':'application/json' //设置跨域头部,虽然不少浏览器默认都是使用json传数据，但咱要考虑IE浏览器。
        };
        if (token) {
            config.headers.Authorization = "Token " + token; //携带权限参数
        }
        return config;
    },
    err => {
        return Promise.reject(err);
    }
);


// http response 拦截器（全部接收到的请求都要从这儿过一次）
axios.interceptors.response.use(
    response => {
//response.status===401是我和后台约定的权限丢失或者权限不够返回的状态码，这个能够本身和后台约定，约定返回某个自定义字段也是能够的
        if(response.status == 401) {
            router.push({ //push后面是一个参数对象，能够携带不少参数，具体能够去vue-router上查看，例如query字段表示携带的参数
                path: '/login' 
            })
        }
        return response;
    },
    error => {
        return Promise.reject(error.response.data)
    });

export default axios;

/**
 * fetch 请求方法
 * @param url
 * @param params
 * @returns {Promise}
 */
export function fetch(url, params = {}) {

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

/**
 * post 请求方法
 * @param url
 * @param data
 * @returns {Promise}
 */
export function post(url, data = {}) {
    return new Promise((resolve, reject) => {
        axios.post(url, data)
            .then(response => {
                resolve(response.data);
            }, err => {
                reject(err);
            })
    })
}

/**
 * patch 方法封装
 * @param url
 * @param data
 * @returns {Promise}
 */
export function patch(url, data = {}) {
    return new Promise((resolve, reject) => {
        axios.patch(url, data)
            .then(response => {
                resolve(response.data);
            }, err => {
                reject(err);
            })
    })
}

/**
 * put 方法封装
 * @param url
 * @param data
 * @returns {Promise}
 */
export function put(url, data = {}) {
    return new Promise((resolve, reject) => {
        axios.put(url, data)
            .then(response => {
                resolve(response.data);
            }, err => {
                reject(err);
            })
    })
}

03

（动态版），axios的拦截器不是必要的，不是每一个项目都须要，并且headers里面的Content-Type和Authorization不止一种，这时就须要使用另外一种方法。ios

util/http.js 
import axios from 'axios' //引用axios
import {Promise} from 'es6-promise'   //引入Promise

// axios 配置和拦截器都不用了，这里我使用了一个动态配置数据请求地址，在App.vue中，代码在下面，这个也不是必须的。


//^_^下面都设置一个默认的头部，使用的时候能够传入数据覆盖^_^,例如使用fetch(GET)方法时，没有请求数据，可是请求头有变化，则应写成 fetch("地址", {}, {"这里写头部的内容"})   记住没数据用一个空对象占位置
/**
 * fetch 请求方法
 * @param url
 * @param params
 * @returns {Promise}
 */
export function fetch(url, params = {}, headers = {
    'Content-Type': 'application/json', //设置跨域头部
    "Authorization": 'JWT ' + sessionStorage.getItem("authToken")
}) {

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

/**
 * post 请求方法
 * @param url
 * @param data
 * @returns {Promise}
 */
export function post(url, data = {}, config = {
    "headers": {
        'Content-Type': 'application/json', //设置跨域头部
        "Authorization": 'JWT ' + sessionStorage.getItem("authToken")
    }
}) {
    return new Promise((resolve, reject) => {
        axios.post(url, data, config)
            .then(response => {
                resolve(response.data);
            }, err => {
                reject(err.response);
            })
    })
}

/**
 * patch 方法封装
 * @param url
 * @param data
 * @returns {Promise}
 */
export function patch(url, data = {}, config = {
    "headers": {
        'Content-Type': 'application/json', //设置跨域头部
        "Authorization": 'JWT ' + sessionStorage.getItem("authToken")
    }
}) {
    return new Promise((resolve, reject) => {
        axios.patch(url, data, config)
            .then(response => {
                resolve(response.data);
            }, err => {
                reject(err.response);
            })
    })
}

/**
 * put 方法封装
 * @param url
 * @param data
 * @returns {Promise}
 */
export function put(url, data = {}, config = {
    "headers": {
        'Content-Type': 'application/json', //设置跨域头部
        "Authorization": 'JWT ' + sessionStorage.getItem("authToken")
    }
}) {
    return new Promise((resolve, reject) => {
        axios.put(url, data, config)
            .then(response => {
                resolve(response.data);
            }, err => {
                reject(err.response);
            })
    })
}
App.vue(这是在 src目录下的程序入口文件) 
<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
import axios from 'axios';
let protocol = window.location.protocol; //协议
let host = window.location.host; //主机
let reg = /^localhost+/;
if(reg.test(host)) {
  //若本地项目调试使用
  axios.defaults.baseURL = 'http://10.0.xx.xxx:xxxx/api/';
} else {
  //动态请求地址
  axios.defaults.baseURL = protocol + "//" + host + "/api/";
}
axios.defaults.timeout = 30000;
export default {
  name: 'app',
  axios   //这里记得导出，若请求地址永久固定一个，则就按照`普通版`配置一个baserURL就能够了
}
</script>

<style lang="scss">  //这里我使用的是scss
@import '~@/style/style'
</style>

04

总结es6

  • 常见问题vue-router

    • 在使用动态版时，为何称为动态呢，是由于访问地址和请求地址是同一个地址可端口号，例如我经过http://www.cmgos.com(默认端口80)访问项目，那么个人baseURL会自动的变为http:www.cmgos.com:80/api/，这么作的缘由是当某一天项目迁移或者http改成https时，不用你再去更改请求地址，程序自动就完成了
    • 数据请求地址配置不正确？若是你配置了baseURL，那么你封装的函数在使用时仅需传入基于baseURL的请求地址，例如传入login/那么请求地址会自动变为http:www.cmgos.com:80/api/login/，若未配置，那么能够直接传入整个请求地址

  • 注意事项json

    • 在使用动态版时，因为没有使用拦截器，因此下面封装的函数在返回错误的时候须要写成err.response.data来获取返回的数据，但我写的是err.response，由于这样能够拿到(status)状态码等信息，若不须要判断返回的状态码，则改成err.response.data即可

原文地址：https://segmentfault.com/a/1190000012805726axios

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程