前端 の axios
文章目录
1.axiox 的多种请求方式
- axios(config)
- axios.request(config)
- axios.get(url[,config])
- axios.delete(url.[config])
- axios.head(url[.config])
- axios.post(url[,date[.config]])
- axios.put(url[,data[,config]])
- axios.patch(url[,data[,config]])
2.基本使用
2.1安装框架:
cnpm install axios --save
2.2 一般用来做为测试的网站:
一个经常拿来做测试的网站:http://httpbin.org/
视频中,老师给出的框架: http://123.207.32.32:8000/home/multidata
3.3代码:
<!-- -->
<template>
<div>
<h2>我是about,呵呵</h2>
<p>我是内容,呵呵</p>
</div>
</template>
<script>
export default {
name: "About",
data() {
return {};
},
};
// 引入 axios
import axios from "axios";
axios({
// 此时应该传入的是一个对象,因为只有对象,才能传入更多的数据。
url: "http://123.207.32.32:8000/home/multidata",
method:'get' //指定使用 get 请求
}).then(res=>{
console.log(res);
})
<script>
返回的结果里面,一般都是返回在 data 里面,其他的部分是vue框架给自动添加的。
3.4 post 请求
// 发送 POST 请求
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});
3.发送并发请求
发送两个请求,当两个请求都发送完了以后,再进行下一步的操作。
// 引入 axios
import axios from "axios";
// 如果是两个请求的话,可以使用两个请求来进行
axios.all([axios(),axios()]).then(results=>{
})
</script>
直接在axios()后边的小括号里,加个 { } ,开始写就行了,返回的会是一个数组,把数组里里面的内容,拿出来自己的写就行了。
<template>
<div>
<h2>我是about,呵呵</h2>
<p>我是内容,呵呵</p>
</div>
</template>
<script>
export default {
name: "About",
data() {
return {};
},
};
// 引入 axios
import axios from "axios";
// 如果是两个请求的话,可以使用两个请求来进行
axios
.all([
axios({
url: "http://httpbin.org/get",
}),
axios({
url: "http://httpbin.org/get",
}),
])
.then((results) => {
console.log(results[0]);
console.log(results[1]);
});
</script>
<style scoped>
</style>
4.全局配置
事实上,开发中,可能很多的参数都是固定的,这个时候,我们可以进行 一些抽取,也可以利用 axios 的全局配置。
axios.defaults 直接在后边加就行了,当然,其他还有更多的全局配置信息,详细信息,请查看官网。
// 引入 axios
import axios from "axios";
axios.defaults.baseURL="http://httpbin.org/get" // 用 defaults 后边跟的就是 全局配置
axios.defaults.timeout=5000
axios
.all([
axios({
url: "",
}),
axios({
url: "",
}),
])
.then((results) => {
console.log(results[0]);
console.log(results[1]);
});
</script>
5.Vue 的实例和模块封装
之前的创建方法,都是使用全局的一个实例,那么在进行配置的时候,一些个默认配置,都会在每一次的 axios 的调用过程中启用,所以为了为每一个 axios ,设置单独的设置默认配置,就需要创建实例。
<script>
// 声明一个实例
import axios from "axios";
const instance1 = axios.create({
baseURL: "http://httpbin.org/patch",
timeout: 5000,
});
// 对实例进配置
instance1({
url: "",
}).then((res) => console.log(res));
// 对实例进行配置
instance1({
url: "/home/data",
method: "get",
data: {
firstName: "Fred",
lastName: "Flintstone",
},
});
// 将配置好的实例,放到 插件的实例里面,在上面进行显示
export default {
name: "",
data() {
return {
result: "",
};
},
created() {
instance1({
url: "/home/data",
method: "get",
data: {
firstName: "Fred",
lastName: "Flintstone",
},
}).then((res) => {
console.log(res);
this.result = res;
});
},
};
</script>
6. vue 的模块封装
模块疯转的意义就在于,当有一天,axios 模块不再维护了,那么当时所有用到 axios 的地方都要进行修改,所以应对于这种情况的通常做法,最常用的方法,就是自己进行模块封装,把 axios 单独的封装起来,如下图所示:
6.1先看一个简单解决方案:
先建立一个 network 文件夹,然后将 request.js 文件写到这个文件夹里面
request 文件夹里面的内容如下:
import axios from 'axios'
// 先声明一个方法
export function request(config, success, failure) {
const instance = axios.create({ // 创建一个 axios 实例
baseURL: 'http://123.207.32.32:8000',
timeout: 5000
})
// 把 config 传进实例里面
// 发送真正的网路请求
instance(config)
.then(res => { // 正常情况下调用
//console.log(res);
success(res);
})
.catch(err => { // 出现异常的时候调用
//console.log(err);
failure(err);
})
// 在 homeNew 里面调用这个方法
}
在引用的地方的代码:
// 调用封装好的 request 模块
import {request} from '../../src/network/request' // 加 {} 的这种方法,是直接把原文件里面对应的方法拿出来了
request({
url:'/home/multidata'
},res=>{
console.log(res)
},err=>{
console.log(err)
}
6.2 再看一个更简单的解决方案
request 文件里面的内容怎么写?
//使用第二种方法进行封装
export function request(config) {
const instance3 = axios.create({
baseURL: 'http://123.207.32.32:8000',
timeout: 5000
})
return instance3(config)
}
在插件里面调用:
// 用第二种方式调用我封装好的 axiso 请求
import {request} from '../../src/network/request'
request({
url:'/home/multidata'
}).then(res=>{
console.log(res);
}).catch(err=>{
console.log(err);
})
7.使用拦截器
对于拦截器,可以在我们每次发送请求或者得到相应后,对获得的数据进行一步的处理,然后把处理后的数据再返回到request 请求里面。
axios 的拦截器默认有四种拦截方式
- 响应成功
- 响应失败
- 请求成功
- 请求失败
在 request.js
文件里面,代码如下:
export function request(config) {
const instance3 = axios.create({
baseURL: 'http://123.207.32.32:8000',
timeout: 5000
})
// axios的拦截器
// 对 实例3 进行拦截
instance3.interceptors.request.use(config => // 请求时候进行拦截,有两个参数,一个是 请求成功,一个是失败
{
console.log(config)
// 1.比如 config的内容不满足服务器的请求
// 2.比如在发送网络请求的时候,都会在界面中显示一个请求的图表
// 3.某些网络请求(比如登录 token),必须携带一些特殊的信息
return config // 在这个地方的config 一点要返回出去
},
err => {
console.log(err)
}
);
instance3.interceptors.response.use( // 响应的时候进行拦截
res => {
console.log(res)
return res.data // 返回data就够了,其他的都用不到
},
err => {
console.log(err)
});