axios的封装和集中管理API接口

这是我参与8月更文挑战的第16天，活动详情查看：8月更文挑战

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

特性

• 从浏览器中创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换 JSON 数据
• 客户端支持防御 XSRF

axios的封装

首先进行axios的简单的封装，便于后面的直接使用

import axios from './axios'

let instance = axios()
export default {
    get (url, params, headers) {
        let options = {}
        if (params) {
            options.params = params
        }
        if (headers) {
            options.headers = headers
        }
        return instance.get(url, options)
    },
    post (url, params, headers) {
        let options = {}
        if (headers) {
            options.headers = headers
        }
        return instance.post(url, params, options)
    },
    put  (url, params, headers) {
        let options = {}
        if (headers) {
            options.headers = headers
        }
        return instance.put(url, params, options)
    },
    delete (url, params, headers) {
        let options = {}
        if (params) {
            options.params = params
        }
        if (headers) {
            options.headers = headers
        }
        return instance.delete(url, options)
    }
}

API的集中管理

上面的代码是可以单独放在一个js文件里面，然后在另外一个文件里面引入使用。比如我的，就是放在了index.js文件里面，然后在使用的时候在新的文件直接引入

我的就是新建一个axios.js的文件，然后引入

import api from '../index'

因为项目是把接口的方法给分开处理的，所以我又重新新建一个文件url.js的文件用来存放接口api，具体的内容如下：

const baseUrl= '服务器的ip地址';
export default {    baseUrl: baseUrl,    loginUser: baseUrl + '/user/login_user_pwd',}

然后这个axios.js的文件里面进行了API的集中管理和使用

axios的拦截器

使用的axios的拦截器，方便查看请求的具体内容，也方便进行其他的一些操作。

使用了 browser 和 qs，具体如下

创建 axios 实例

let http = axios.create({
    // headers: {'Content-Type': 'application/json'},
    timeout: 60000
})

设置 post、put 默认 Content-Type

http.defaults.headers.post['Content-Type'] = 'application/json'
http.defaults.headers.put['Content-Type'] = 'application/json'

添加请求拦截器

• post、put 提交时，将对象转换为string, 为处理Java后台解析问题
• 给GET 请求后追加时间戳， 解决IE GET 请求缓存问题

添加响应拦截器

这样就做好一个简单的axios封装然后API的集中管理