axios的基本介绍及在vue中的模块化封装

一、什么是axios？

1、axios是一个基于Promise的Http库，可以用在node.js环境和浏览器中，特性：

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

2、可以通过向 axios 传递相关配置来创建请求 axios(config)，为方便起见，为所有支持的请求方法提供了别名：

• axios.request(config)
• axios.get(url[, config])
• axios.delete(url[, config])
• axios.head(url[, config])
• axios.options(url[, config])
• axios.post(url[, data[, config]])
• axios.put(url[, data[, config]])
• axios.patch(url[, data[, config]])

二、在vue中的模块化封装

1、安装axios，创建network文件夹并新建request.js文件，结构如下：

import axios from 'axios'

export function request(config){
  const instance = axios.create({
    baseURL: 'http://httpbin.org',
    timeout: 5000
  })

  return instance(config)
}

2、在任意组件中使用如下：

import {request} from "./network/request"

created(){
  request({
    url: '/#/HTTP_Methods/get_get',
    method: 'get'
  }).then(value => {
    console.log(value)
  }).catch(err => {
    console.log(err);
  })
}

三、拦截器

1、很多时候我们需要在发送请求和响应数据的时候做一些页面处理，比如在请求服务器之前先判断用户是否登录(通过token判断), 或者设置请求头header，或者在请求到数据之前页面显示loading等等，还有在响应到数据的之后做一些判断，例如服务器返回401登录状态失效，需要重新登录的时候，跳转到登录页，请求成功后关闭页面loading等，这个时候我们就可以用到axios拦截器来做这一系列的事情。

2、请求拦截器

instance.interceptors.request.use(config => {
  //在发送请求之前做些什么
  return config
}, err => {
  //若请求失败，做些什么
  return Promise.reject(err)
})

3、响应拦截器

instance.interceptors.response.use(response => {
  //对响应数据做点什么
  return response
}, err => {
  //若响应失败，做点什么
  return Promise.reject(err)
})