axios
基于promise用于浏览器和node.js的http客户端
1.特点：
1.支持浏览器和node.js
2.浏览器端支持防止CSRF（跨站请求伪造）
3.支持promise
4.能够拦截请求和响应
5.能够转换请求和响应数据
6.能取消请求
7.它能自动转换为json的数据
2.如何使用
1.安装 npm install --save axios
2.在main.js或者index.js
import axios from "axios"
Vue.prototype.$http=axios
3.基本的api的方法
1.执行get请求，有两种方式
第一种方式：将参数直接写在url中
axios.get("/getName?id=12").then((res)=>{}).catch((err)=>{})
第二种方式：将参数写在params中
axios.get("/getName",{params:{id:12}}).then((res)=>{}).catch((err)=>{})
created(){
// this.$http 等价于 axios
this.$http.get("https://xxdfg/uuuuil/klkl?id=14").then((res) => {
console.log(res)
});
this.$http.get("https://xxdfg/uuuuil/klkl",{params:{id:14}}).then((res) => {
console.log(res)
})
}
2.执行post请求，注意执行post请求的参数的时候，不需要写params字段中，这里要注意和get请求的第二种方式区别开来
axios.post("/getName",{id:123}).then((res)=>{}).catch((err)=>{})
4.通过向axios传递相关的配置来创建请求
url：请求路径 string类型
method:请求的方法
baseURL:baseURL会自动加载url的前面
headers：自定义请求消息头
params: 用来传递参数
timeout：超时的时间，超过时间，请求就会终止
基本方式发送post请求
axios({
method:"post"，
url：“”
})
5 配置默认值
axios.default.baseURL=""
axios.default.headers.common["sk"]=auto_token;
axios.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded';
6.执行多个并发
axios.all()和promise.all()的机制是一样的，都是可以执行多个并发，要么全部成功走then，要么就走catch
function getName(){
return axios.get("/getName")
}
function getAge(){
return axios.get("/getAge")
}
axios.all([getName(),getAge()]).then((res)=>{}).catch((err)=>{
})
7.拦截器
1.在请求之前拦截请求
//添加请求拦截器
axios.interceptors.request.use(function(config){
//发送请求之前做了什么事情
return config
},function(err){
//对请求的错误做了什么
return Promise.reject(err)
})
2.在响应的时候进行拦截
axios.interceptors.response.use(function(response){
//对响应的数据做什么操作
return response
},function(err){
//对请求的错误做了什么
return Promise.reject(err)
})
8.请求方法别名
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
注释
当使用以上别名方法时，url，method和data等属性不用在config重复声明
<script>
axios({
// 注意：只有url是必填，默认的请求方法是GET
url: '/user',// `url` 是请求的接口地址
method: 'get',// `method` 是请求的方法 默认值是get
baseURL: 'https://some-domain.com/api/',// 如果url不是绝对路径，那么会将baseURL和url拼接作为请求的接口地址
// 用于请求之前对请求数据进行操作
// 只用当请求方法为‘PUT’，‘POST’和‘PATCH’时可用
// 函数需return出相应数据
// 可以修改headers
transformRequest: [function (data, headers) {
return data;// 可以对data做任何操作
}],
// 用于对相应数据进行处理
// 它会通过then或者catch
transformResponse: [function (data) {
return data;// 可以对data做任何操作
}],
headers: {'X-Requested-With': 'XMLHttpRequest'},// 请求消息头
params: {ID: 12345},// URL参数必须是一个纯对象或者 URL参数对象
paramsSerializer: function(params) {// 是一个可选的函数负责序列化`params`
return Qs.stringify(params, {arrayFormat: 'brackets'})
},
// 请求体数据
// 只有当请求方法为'PUT', 'POST',和'PATCH'时可用
// 当没有设置`transformRequest`时，必须是以下几种格式
// - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
// - Browser only: FormData, File, Blob
// - Node only: Stream, Buffer
data: {firstName: 'Fred'},
timeout: 1000,// 请求超时时间（毫秒）
withCredentials: false, // 默认default，是否携带cookie信息
adapter: function (config) {},// 统一处理request让测试更加容易，返回一个promise并提供一个可用的response
auth: {
username: 'janedoe',
password: 's00pers3cret'
},
// 响应格式
// 可选项 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
responseType: 'json', // 默认值是json
xsrfCookieName: 'XSRF-TOKEN', // default
xsrfHeaderName: 'X-XSRF-TOKEN', // default
onUploadProgress: function (progressEvent) {},// 处理上传进度事件
onDownloadProgress: function (progressEvent) {},// 处理下载进度事件
maxContentLength: 2000,// 设置http响应内容的最大长度
// 定义可获得的http响应状态码
// return true、设置为null或者undefined，promise将resolved,否则将rejected
validateStatus: function (status) {
return status >= 200 && status < 300; // default
},
maxRedirects: 5, // default 最大重定向次数
httpAgent: new http.Agent({ keepAlive: true }),
httpsAgent: new https.Agent({ keepAlive: true }),
proxy: {
host: '127.0.0.1',
port: 9000,
auth: {
username: 'mikeymike',
password: 'rapunz3l'
}
},
cancelToken: new CancelToken(function (cancel) {})//字面上是取消token值
})
</script>
<script>
// response响应组成
({
data: {},// 服务端返回的数据
status: 200,// 服务端返回的状态码
statusText: 'OK',// 服务端返回的状态信息
headers: {},// 响应头,所有的响应头名称都是小写
config: {},// 请求配置
request: {}// 请求
})
// 注意：他们返回的是promise用then接收以下响应信息
axios.get('/user/12345').then(function(response) {
console.log(response.data);
console.log(response.status);
console.log(response.statusText);
console.log(response.headers);
console.log(response.config);
});
</script>
<script>
// 创建实例时修改配置
var instance = axios.create({
baseURL: ''
});
// 实例创建之后修改配置
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// 配置项通过一定的规则合并，request config > instance.defaults > 系统默认，优先级高的覆盖优先级低的。
var instance = axios.create();// 创建一个实例，这时的超时时间为系统默认的 0
// 通过instance.defaults重新设置超时时间为2.5s，因为优先级比系统默认高
instance.defaults.timeout = 2500;
</script>
