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' ，这是局部导入的方式。
另外一种是全局导入，先去封装axios，然后导入。
GET、POST 请求 axios.get().then()
使用
axios.get
发起
GET
请求，使用.then
获取响应数据。先去实现一个Home组件，Home.vue里面的内容：
<template>
<div>
<button type="button" @click="getData()">AxiosGet</button><br>
axios get获取到的数据:<p style="color: red;">{{ resdata }}</p>
</div>
</template>
<script>
//导入axios，取别名为axios为下面使用
import axios from 'axios'
export default ({
data() {
return{
resdata: {
}
}
},
methods:{
getData(){
//使用axios发起HTTP get请求
axios.get('http://httpbin.org/get')
//then表示http请求成功情况下，拿到响应，response是响应内容
.then(response=>{
this.resdata = response
}
)
}
}
})
</script>在main.js当中，全局导入组件
import { createApp } from 'vue'
import App from './App.vue'
import Test from '@/components/Test.vue'
import Home from '@/components/Home.vue'
const vm = createApp(App)
vm.component('Test',Test)
vm.component('Home',Home)
vm.mount('#app')App.vue当中全局导入Home组件
<template>
<img alt="Vue logo" src="./assets/logo.png">
<Home></Home>
<HelloWorld msg="父亲组件App 子组件HelloWorld" />
</template>
如果是post请求
axios.post('http://httpbin.org/post')异常处理 axios.get().then().catch()
很多时候我们可能并没有从 API 获取想要的数据。这可能是由于很多种因素引起的，比如 axios 调用可能由于多种原因而失败，包括但不限于：
- API 不工作了
- 请求发错了
- API 没有按我们预期的格式返回信息。
可以使用catch异常处理这些问题， 模拟连接一个不存在的地址，前段给出提示：
<template>
<div>
<button type="button" @click="getData()">AxiosGet</button><br>
axios get获取到的数据:<p style="color: red;">{{ resdata }}</p>
</div>
</template>
<script>
//导入axios，取别名为axios为下面使用
import axios from 'axios'
export default ({
data() {
return{
resdata: {
}
}
},
methods:{
getData(){
//使用axios发起HTTP get请求
axios.post('http://httpbin.org/post1')
//then表示http请求成功情况下，拿到响应，res是响应内容
.then(response=>{
this.resdata = response
}
)
.catch(response=>{
alert(response.message)
console.log(response.message)
})
}
}
})
</script>
还有一个能力是无论成功与否，都会执行，有一个finally。
axios.post('http://httpbin.org/post1')
//then表示http请求成功情况下，拿到响应，res是响应内容
.then(response=>{
this.resdata = response
}
)
.catch(response=>{
alert(response.message)
console.log(response.message)
})
.finally(()=>{
console.log("最后执行的内容")
})全局默认值 一般情况下不这么使用
在实际开发中，几乎每个组件都会用到axios发起数据请求(每个页面的数据都是活的，不可能数据发生变化的时候都去更新代码)，如果每次都填写完整的请求路径，不利于后期维护。这时可以设置全局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')
<template>
<div>
<button @click="getData()">axios获取后端数据</button>
<p>{{ data }}</p>
</div>
</template>
<script>
//导入aixos
import axios from 'axios'//'axios'是正真的第三方包，axios是别名
export default({
data() {
return{
data: ''
}
},
methods:{
getData(){
//设置了全局的baseUrl后
//使用axios发起http的get请求，发起axios请求，它会去和默认的baseURL做拼接
axios.get('/get')
// axios.get('http://httpbin.org/get')
//then表示http请求成功情况下，拿到响应，res是响应内容
.then(res =>{
this.data = res.data
})
.catch(res=>{
alert(res.message)
})
//无论成功与否
.finally(res=>{
console.log("这是最后执行的命令")
})
}
}
})
</script>
可以看到，会去做自动的拼接。
自定义实例默认值
有时候服务端接口有多个地址，就会涉及请求的域名不同、配置不同等，这时自定义实例可以很好解决。
上面这种全局默认值一般不使用，我们要自己去封装一个axios，使用下面方式，这里这个文件会去封装axios。
//封装axios
//做一些全局配置，以及拦截器的配置
import axios from "axios";
//实例化axios对象
const instance = axios.create({
baseURL: 'http://httpbin.org',
timeout: 5000,
})
//暴露新的axios实例
export default instance在src目录下面创建一个request的文件夹。
做全局配置和拦截器的配置
//封装axios
//做一些全局配置，以及拦截器的配置
import axios from "axios";
//实例化axios对象
const instance = axios.create({
baseURL: 'http://httpbin.org',
timeout: 5000,
})
//暴露新的axios实例
export default instance<template>
<div>
<button @click="getData()">axios获取后端数据</button>
<p>{{ data }}</p>
</div>
</template>
<script>
//导入aixos
//import axios from 'axios'//'axios'是正真的第三方包，axios是别名
import http from '@/request'
export default({
data() {
return{
data: ''
}
},
methods:{
getData(){
//使用新的axios实例发起请求
http.get("/get")
//设置了全局的baseUrl后
//使用axios发起http的get请求，发起axios请求
// axios.get('/get')
// axios.get('http://httpbin.org/get')
//then表示http请求成功情况下，拿到响应，res是响应内容
.then(res =>{
this.data = res.data
})
.catch(res=>{
alert(res.message)
})
//无论成功与否
.finally(res=>{
console.log("这是最后执行的命令")
})
}
}
})
</script>一般都是使用上面这种方式去封装axios，自己封装或者从其他项目里面copy过来、
拦截器
正常情况下打开一个浏览器，前端页面向后端页面发起请求，使用的是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
1107
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
