axios

Axios 介绍

---

官方文档: http://www.axios-js.com/zh-cn/docs/

在前端页面展示的数据大多数都是通过访问一个 API 获取的，做这件事的方法有好几种，例如 jquery ajax 、 vue-resource、 axios ，而 vue-resource 是 vue 插件，但 3 版本不再更新，目前官方推荐主流的 axios ， aixos 是一个http请求库。（本质上是基于axios的封装）

Axios 使用

---

安装 axios: npm install axios

在组件中导入并使用

import axios from 'axios'   （全局或者局部导入都行）

GET 请求

---

使用 axios.get 发起 GET 请求。

使用 .then 获取响应数据。

先去实现一个Home组件，Home.vue里面的内容

App.vue当中

异常处理

很多时候我们可能并没有从 API 获取想要的数据。这可能是由于很多种因素引起的，比如 axios 调用可能由于多种原因而失败，包括但不限于：

• API 不工作了
• 请求发错了
• API 没有按我们预期的格式返回信息。

可以使用catch异常处理这些问题。 模拟连接一个不存在的地址，前段给出提示：

全局默认值

---

在实际开发中，几乎每个组件都会用到axios发起数据请求(每个页面的数据都是活的，不可能数据发生变化的时候都去更新代码)，如果每次都填写完整的请求路径，不利于后期维护。这时可以设置全局axios默认值。

添加 axios 全局配置：

//导入vue依赖当中的createApp方法，这里的createApp是原生方法名称，不能改
import { createApp } from 'vue'
import App from './App.vue'

//导入组件，这种方式是将整个Test.vue界面都导入进来,这里的Test是别名可以随便取
import Test from '@/components/Test.vue'


//添加axios全局配置
//1 引入axios
import axios from 'axios'
//2 设置axios的全局配置
axios.defaults.baseURL = 'http://httpbin.org'
axios.defaults.timeout = 5000

const app = createApp(App)
//使用component去注册组件，第一个参数是组件名称，自定义，第二个是上面定义的组件import Test from 
app.component('Test',Test)
app.mount('#app')

 会去做自动的拼接

自定义实例默认值

有时候服务端接口有多个地址，就会涉及请求的域名不同、配置不同等，这时自定义实例可以很好解决。

上面这种情况一般不使用，使用下面方式，这里这个文件会去封装axios。

//封装axios
//做一些全局配置，以及拦截器的配置
import axios from "axios";

//实例化axios对象
const instance = axios.create({
    baseURL: 'http://httpbin.org',
    timeout: 5000,
})

//暴露新的axios实例
export default instance

//封装axios
//做一些全局配置，以及拦截器的配置
import axios from "axios";

//实例化axios对象
const instance = axios.create({
    baseURL: 'http://httpbin.org',
    timeout: 5000,
})

//暴露新的axios实例
export default instance

 一般都是使用上面这种方式去封装axios。

拦截器

正常情况下打开一个浏览器，前端页面向后端页面发起请求，使用的是aixos发起请求，无论是原装的还是封装的axios，后端去数据库中拿数据返回给前端。

发起请求的地方是axios，你那个自己封装axios，那么你就可以添加拦截器。

请求拦截器就是你在发起请求的时候要做什么事情，响应拦截器就是在接受到请求之后，去干嘛干嘛。

• 拦截器可以拦截每一次请求和响应，然后进行相应的处理。（前端调后端，后端是有鉴权逻辑的，前端要加一个token，前端在登入的时候就获取到这个token了，每次发起请求的时候这个token加入到url参数内）
• 请求拦截应用场景： 发起请求前添加header

响应拦截应用场景：

• 统一处理API响应状态码200或非200的提示消息（拿到业务的状态码做一些自定义的响应配置）
• 统一处理catch异常提示信息
• src/request/index.js 示例代码

 

//封装axios
//做一些全局配置，以及拦截器的配置
import axios from "axios";

//实例化axios对象
const instance = axios.create({
    baseURL: 'http://httpbin.org',
    timeout: 5000,
})

//添加请求拦截器,config接受参数的方式，随意命名
instance.interceptors.request.use(config=>{
    //在请求发送之前做的事情，比如添加请求头
    config.headers['Test-Header'] = 'zangsan'
    return config
},
   //请求发生了error
   error=>{
    //处理错误请求
    //axios是基于ajax和promise封装的
    //promise.reject就表示使用instance发起请求的时候，失败了在catch中获取错误
    return Promise.reject(error)
   }
)

//添加响应拦截器
instance.interceptors.response.use(res=>{
 //响应接收后做的事情，在then catch finally之前做的事情
 if(res.status != 200){
    alert("数据请求失败")
 }
 return res
},
error =>{
    //非200状态码走这里
    return Promise.reject(res)
}
)

//暴露新的axios实例
export default instance

​​​​​​​