阅读 113

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 请求缓存问题

image.png

添加响应拦截器

image.png

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

文章分类
前端
文章标签