axios模块
封装了网络请求的基础模块：XHR 或 fetch.
由于原生Ajax请求代码较为复杂，所以经常会封装后进行使用：
1、jQuery
$.get()
$.post()
$.ajax({
url : ,
method:,
success: (res)=>{
......
}
})
....
简化了原生发送请求时的代码量，抹平了一些技术细节与浏览器兼容性问题。
2、axios：一款专业的用promise封装而来的网络请求库。API更加简洁
axios的官方网址：http://www.axios-js.com/
安装axios
基于脚手架项目，安装axios模块，需要在项目的根目录下执行命令：
npm install axios
npm i axios
基于axios发送get请求
方式1：axios.get(url)
// 引入axios
import axios from 'axios'
// 调用get方法发送get请求
let url = 'http://ip:port/api?name=zs&pwd=1234'
axios.get(url).then(res=>{
// .then()中的回调方法，将会在请求成功，获取响应后自动执行
// res就是请求成功后，axios封装的响应数据对象
}).catch(err=>{
// 如果请求失败，执行catch中的回调方法
})
方法2：axios(url)
axios(url).then(res=>{
// res就是请求成功后，axios封装的响应数据对象
}).catch(err=>{
// 如果请求失败，执行catch中的回调方法
})
方法3：axios.create( ).get ( )
let instance = axios.create()
instance({
url:'请求地址',
methods:'get',
params:{
page:1,
pagesize: 5
}
}).then(res=>{ 获取响应结果res })
案例：
封面
电影名称
主演
上映时间
时长
评分
![]()
{{item.title}}
{{item.star_actor}}
{{item.showingon}}
{{item.duration}}分钟
{{item.score}}分
基于axios 发送 post 请求
方式1：
方式2：
方式3：用 qs 模块进行post传参
原理：把 objec t转 formdata 格式字符串的模块：qs。
安装 qs 模块命令：npm i qs
调用方法：
import qs from ' qs '
qs . stringify ( { name : ' zs ' , pwd : ' 1234 ' } ) -> " name = zs & pwd = 1234 "
至此发现：使用axios发送get请求，与发送post请求的API设计的不太一致，导致以后调用时增加开发成本，所以 工程化开发时通常情况下需要自己封装一个新的 axios ，设计一些用着舒爽的 API ，增加代码复用性与可维护性。
案例：
封面
电影名称
主演
上映时间
时长
评分
![]()
{{item.title}}
{{item.star_actor}}
{{item.showingon}}
{{item.duration}}分钟
{{item.score}}分
封装Axios
无论发送get与post，不用写太多代码，简单的调用get 、 post方法，传url与对象参数即可完成请求的发送与响应的接收。
如下调用：
封装代码：写在src下新建http文件下，文件名命名为MyAxios.js
import axios from 'axios'
const instance = axios.create() //创建axios 实例
import qs from 'qs'
const myaxios = {
/*
用于发送get 请求
url：请求资源路径
params：请求参数（Object形式）
*/
get(url,params){
return instance({
url,
method:'get',
params
})
},
/* 用于发送post请求
url ：请求资源路径
params：请求参数（Object）
*/
post(url,params){
return instance ({
url,
method: 'post',
data: qs.stringify(params)
})
}
}
export default myaxios在vue文件中的使用：
![]()
{{item.director_name}}