网络模块的选择
- 选择一,原生ajax。配置和调用非常的混乱。在开发中很少选择,而是使用jquery封装的ajax.
- 选择二,jquery封装的ajax.在开发vue项目的时候很少选择。因为我们开发vue项目是完全不依赖jquery的。所以为了使用jquery封装的ajax.去引入jquery得不偿失。
- 选择三,axios框架。也就是我们最终的选择。他有很多的优点比如支持Promise,支持拦截请求和响应。
使用axios框架
安装axios框架
npm install axios --save
导入axios框架
import axios from "axios"
axios进行网络请求的简单使用
可以直接就使用axios。
- axios(config) config就是配置,也就是网络请求的一些配置。
- axios.get(url,[config])使用这种方式第一个参数是url
- axios.post(url,[data,[config]])
...
其实他们可能形式上有点差距,本质上其实是差不多的。
axios(config)
axios(config)默认的请求方式是一个get请求,当然可以通过config配置它的method属性,可以指定它是以什么方式进行请求的。
axios({
url:"http://123.207.32.32:8000/home/multidata"
})
这就是一个最基本的请求了。(默认是get方式。)
在ajax中,请求成功之后,会调用success中的函数处理请求来的数据。那在我们axios中是怎么处理的呢?
axios()本身会返回一个Promise对象,当请求成功的时候,会默认调用resolve()函数,从而你可以把请求成功处理data 的代码放到then方法中执行。同理请求失败的时候,会默认调用reject函数传入错误信息。然后默认调用catch方法
axios({
url:"http://123.207.32.32:8000/home/multidata"
}).then(res=>console.log(res)).catch(err=>console.log(err))
就像我这种形式就是最基本的使用。我们来打印一下res看看.
是这个对象。其实本质上服务器就给了data属性的东西,也就是说obj.data才是服务器传过来的数据。是axios框架自己自作多情给传入的数据包装了这么多其他的属性。
axios的get请求传递参数
当我进行get请求的时候怎么传递参数呢?
- 方式一,直接在url中拼接数据。 我们get请求的参数可以直接拼接到url后面。比如:
axios({
url:"http://123.207.32.32:8000/home/multidata?aaa=1&type=2"
}).then(res=>console.log(res))
直接在url上拼接数据即可。
- 方式二,config中配置params属性
axios({
url:"http://123.207.32.32:8000/home/multidata",
params:{
aaa:1,
type:2
}
}).then(res=>console.log(res)).catch(err=>console.log(err))
axios发送并发请求
就是有的业务需要两个网络请求都成功才进行下一步操作。这时候,我们可以使用axios发送 就是通过:
axios.all([]);//传入一个数组,数组元素都是一个axios网络请求
axios.all([
axios({
url:"http://123.207.32.32:8000/home/data"
}),
axios({
url:"http://123.207.32.32:8000/home/multidata"
})
]).then(res=>console.log(res))
然后统一在then方法中进行处理,注意这时候then方法中的res是一个数组他应该是两个请求请求来的数据组成的数组。
axios 配置相关
config的基础内容
config中可以配置哪些东西呢?
- baseURL baseURL就是url的公共部分我们把它们取出来,这就是baseURL。他会和我们的url进行拼接。比如上面两个url,我们可以把
http://123.207.32.32:8000
赋值给baseURL,那我们的url就没那么长了
axios({
baseURL:"http://123.207.32.32:8000",
url:"/home/data"
})
- url 请求路径
- method 请求的类型
- params get请求传参
- timeout 超时设置
- data post请求传参
config的默认值
我们可以发现其实很多请求很多配置项都是相同的。那么我们可以设置配置项的默认值
设置方式
axios.defaults.baseURL[=""
这样的形式。
注意点
这里我们是直接使用的axios。也就是一个全局的axios。实际上axios可以创造很多实例,上面的默认值只是针对使用全局的axios进行网络请求的配置。
axios的实例
为什么要创造axios的实例
因为如果都使用全局的axios,那么你只有一套默认配置,可能很多请求的baseURL是A,很多请求的baseURL是B。那么一套默认配置就很麻烦。那么这时候我们就可以创建多个实例。就很多套的默认配置。
怎么创建axios的实例
let instance1 = axios.create({
baseURL:"",
timeout:5000
})
create方法传入的对象就是这个实例的默认配置。
axios的封装
为什么要封装axios
如果我们很多组件都要进行网络请求,我们需要在他们的.vue文件中导入axios框架。
import axios from "axios"
这样会导致一个很严重的问题,我们的项目对这个第三方框架依赖太强了。就是万一这个框架出bug了或者不更新了,我们要更换框架,就很麻烦。所以最好就是我们自己封装第三方框架,在项目中用自己封装的来进行网络请求。这样,即使更换第三方框架我们只需要在做封装的js代码中处理就好了。
简单封装axios
新建一个.js文件 request.js:
import axios from "axios"
export function instance1 (config,success,failure){
let instance = axios.create({});
instance(config).then(res=>success(res)).catch(err=>failure(err))
}
在要进行网络请求的组件中:
通过封装我们只需要导出我封装的这个函数即可。并且这个函数有三个参数
- 第一个参数,对象,是网络请求的相关配置。
- 第二个参数,函数,网络请求成功时处理数据的操作
- 第三个参数,函数,网络请求失败时相应的操作
其实还有一种方案:
在request.js中:
import axios from "axios"
// export function instance1 (config,success,failure){
// let instance = axios.create({});
// instance(config).then(res=>success(res)).catch(err=>failure(err))
// }
export function instance1 (config){
let instance = axios.create({});
return instance(config);
}
在使用网络请求的组件中:
什么意思呢? 基本思想就是我们不需要成功后的操作和失败后要做的操作传入,而是我直接把这个网络请求返回出去。之前我说过网络请求内部其实会返回一个Promise对象,那我直接把这个网络请求return出去,你处理数据和处理数据的操作就在组件中写就好了,别给我传进来了。
axios拦截器
之前说过,axios是可以进行拦截请求和响应的。他提供了对应的方法:
拦截请求
拦截方法:
axios/(axios.instance).interceptors.request.use(config=>{return config},err=>{})
- 拦截请求成功,就会执行config=>{},其实拦截的就是请求的配置(刚刚我们不是给请求配置了很多东西嘛),赋值给config.
config: - 拦截请求失败,就会执行err=>{},其实一般不存在请求都发送失败的情况哈哈哈,所以这个基本不会触发。
注意点
你把人家的配置拦截了,一定要return 还回去,不然别人就没配置了!!!所以一定要return config.
拦截响应
axios/(axios.instance).interceptors.response.use(res=>{return res;},err=>{})
- 拦截响应成功,就会执行res=>{},其实拦截的就是请求过来的数据(当然它被axios包装了),赋值给res.
- 拦截响应失败,就会执行err=>{}
注意点
响应拦截成功一定也要返回数据,不然页面本来要渲染的数据被你截胡了页面就渲染不出来了。