版权声明：作者：shenroom 来源：CSDN 版权声明：本文为博主原创文章，转载请附上博文链接！ https://blog.csdn.net/qq_41772754/article/details/88075391
axios : 基于http客户端的promise，面向浏览器和nodejs
axios 依赖原生的 ES6 Promise 实现而被支持.
安装
1.使用npm: npm install axios
2.使用taobao源: cnpm install axios
3.使用bower: bower install axios
4.使用cdn： <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
1.先看一下 axios 的选项参数说明：
axios({
url:'/user', // `url`是服务器链接，用来请求用
method:`get`, // `method`是发起请求时的请求方法
baseURL:'http://some-domain.com/api/', // `baseURL`如果`url`不是绝对地址，那么将会加在其前面。当axios使用相对地址时这个设置非常方便
transformRequest:[function(data){ // `transformRequest`允许请求的数据在传到服务器之前进行转化。只适用于`PUT`,`GET`,`PATCH`方法。数组中的最后一个函数必须返回一个字符串，一个`ArrayBuffer`,或者`Stream`
//依自己的需求对请求数据进行处理
return data;
}],
transformResponse:[function(data){ // `transformResponse`允许返回的数据传入then/catch之前进行处理
//依需要对数据进行处理
return data;
}],
headers:{'X-Requested-with':'XMLHttpRequest'},//`headers`是自定义的要被发送的头信息
params:{ //`params`是请求连接中的请求参数，必须是一个纯对象，或者URLSearchParams对象
ID:12345
},
paramsSerializer: function(params){//`paramsSerializer`是一个可选的函数，是用来序列化参数，例如：（https://ww.npmjs.com/package/qs,http://api.jquery.com/jquery.param/)
return Qs.stringify(params,{arrayFormat:'brackets'})
},
data:{//`data`是请求提需要设置的数据，只适用于应用的'PUT','POST','PATCH'，请求方法。当没有设置`transformRequest`时，必须是以下其中之一的类型（不可重复？）：-string,plain object,ArrayBuffer,ArrayBufferView,URLSearchParams。仅浏览器：FormData,File,Blob。仅Node：Stream
firstName:'fred'
},
//`timeout`定义请求的时间，单位是毫秒。
//如果请求的时间超过这个设定时间，请求将会停止。
timeout:1000,
//`withCredentials`表明是否跨域请求，
//应该是用证书
withCredentials:false //默认值
//`adapter`适配器，允许自定义处理请求，这会使测试更简单。
//返回一个promise，并且提供验证返回（查看[response docs](#response-api)）
adapter:function(config){
/*...*/
},
//`auth`表明HTTP基础的认证应该被使用，并且提供证书。
//这个会设置一个`authorization` 头（header），并且覆盖你在header设置的Authorization头信息。
auth:{
username:'janedoe',
password:'s00pers3cret'
},
//`responsetype`表明服务器返回的数据类型，这些类型的设置应该是
//'arraybuffer','blob','document','json','text',stream'
responsetype:'json',
//`xsrfHeaderName` 是http头（header）的名字，并且该头携带xsrf的值
xrsfHeadername:'X-XSRF-TOKEN'，//默认值
//`onUploadProgress`允许处理上传过程的事件
onUploadProgress: function(progressEvent){
//本地过程事件发生时想做的事
},
//`onDownloadProgress`允许处理下载过程的事件
onDownloadProgress: function(progressEvent){
//下载过程中想做的事
},
//`maxContentLength` 定义http返回内容的最大容量
maxContentLength: 2000,
//`validateStatus` 定义promise的resolve和reject。
//http返回状态码，如果`validateStatus`返回true（或者设置成null/undefined），promise将会接受；其他的promise将会拒绝。
validateStatus: function(status){
return status >= 200 &;&; stauts < 300;//默认
},
//`httpAgent` 和 `httpsAgent`当产生一个http或者https请求时分别定义一个自定义的代理，在nodejs中。
//这个允许设置一些选选个，像是`keepAlive`--这个在默认中是没有开启的。
httpAgent: new http.Agent({keepAlive:treu}),
httpsAgent: new https.Agent({keepAlive:true}),
//`proxy`定义服务器的主机名字和端口号。
//`auth`表明HTTP基本认证应该跟`proxy`相连接，并且提供证书。
//这个将设置一个'Proxy-Authorization'头(header)，覆盖原先自定义的。
proxy:{
host:127.0.0.1,
port:9000,
auth:{
username:'cdd',
password:'123456'
}
},
//`cancelTaken` 定义一个取消，能够用来取消请求
//（查看 下面的Cancellation 的详细部分）
cancelToke: new CancelToken(function(cancel){
})
});上面看起来那么多的 参数，其实实际开发中也就用到几个，上面的内容作为了解即可。下面咱们开始正式介绍axiox的配置和使用
2.axios 全局配置
1.安装: npm install axios --save
2.配置文件
(1)在 src 文件夹中创建 api 文件夹,并创建文件 axios.js 和 index. ├── src
│ ├── api
... ... ├── axios.js
└── index.js(2)axios.js文件:/* 1.引入文件 */
import axios from 'axios' //引入 axios库
import qs from 'qs' //引入 node中自带的qs模块（数据格式转换）
/* 2.全局默认配置 */
let baseURL
// 判断开发环境（一般用于本地代理）
if (process.env.NODE_ENV === 'development') { // 开发环境
baseURL = '/api'
} else { // 编译环境
if (process.env.type === 'test') { // 测试环境
baseURL = 'http://sw.apitest.com'
} else { // 正式环境
baseURL = 'http://sw.api.com'
}
}
const Axios = axios.create({
baseURL:baseURL , // 后台服务地址
timeout: 60000, // 请求超时时间1分钟
responseType: "json",
withCredentials: false // 是否允许带cookie这些
});
/* 3.设置拦截器 */
Axios .interceptors.request.use((config) => {
// 可在此处配置请求头信息
config.headers["appkey"] ="...";
config.headers["token"] ="...";
...
if (config.method == "post") { // 数据转换: axios 默认是application/x-www-form-urlencoded数据格式提交，所以要用qs.stringify()进行转换
config.data = qs.stringify(config.data)
}
return config;
},(error) =>{
//console.log("错误的传参", 'fail');
return Promise.reject(error)
})
返回状态判断(添加响应拦截器)
axios.interceptors.response.use((res) =>{
if(res.status == 200){ // 对响应数据做些事
// console.log(res.data.msg)
//alert("提交成功")
return Promise.resolve(res)
}
return res;
}, (error) => {
//console.log("网络异常", 'fail'); 404等问题可以在这里处理
//alert("网络异常!")
return Promise.reject(error)
})
export default Axios (3)index.js文件import fetch from "./axios"
// 封装请求函数，并导出
export
function getItemList(datas) {
return fetch({
url: "/api/getItemList",
method: "post",
//headers: {
// 'Content-Type': 'application/json' //设置请求头请求格式为JSON
//},
data: datas
})
}
export
function getItemInfo(datas) {
return fetch({
url: "/api/getItemInfo",
method: "post",
data: datas
})
}3.在组件中使用<template>
<div class="home">
</div>
</template>
<script>
import { getItemList,getItemInfo } from '@/api' // 导入 封装的请求函数
export default {
name: 'HelloWorld',
data () {
return {
getItemListData:{},// getItemList 接口入参
getItemInfoData:{}, // getItemInfo 接口入参
}
},
created(){
getItemList(this.getItemListData).then(res=>{
// 请求返回数据
}).catch(err=>{
// 请求失败
})
getItemInfo(this.getItemInfoData).then(res=>{
// 请求返回数据
}).catch(err=>{
// 请求失败
})
}
}
</script> 4.设置代理解决请求跨域(如果需要的话) config/index.js
前后端分离开发时会遇到跨域问题,可通过以下配置使用服务器代理解决跨域.
项目打包上线时不存在跨域,可在配置文件中做环境判断。上面的配置文件axios.js文件中已经做了环境判断，所以无需更改。/*---------------------------(1) 打开config/index.js-------------------------------------------*/
//将文件中的该项配置 proxyTable:{} 修改成如下配置
proxyTable: {
'/aaa': { // 这个aaa 要与 axios.js 文件中的 baseURL 值对应
target: 'http://sw.api.com', // 你接口的域名
changeOrigin: true,
pathRewrite:{
'^/aaa':''
}
}
}
/*---------------------------(2) api/axios.js 文件的基路径配置,开发环境中的baseURL -------------------------------*/
let baseURL
// 判断开发环境（一般用于本地代理）
if (process.env.NODE_ENV === 'development') { // 开发环境
baseURL = '/aaa' // 对应上面的代理名 aaa
} else { // 编译环境
if (process.env.type === 'test') { // 测试环境
baseURL = 'http://sw.apitest.com'
} else { // 正式环境
baseURL = 'http://sw.api.com'
}
}
5.多个域名接口代理设置 config/index.js
有时候一个项目，往往涉及多个服务器的接口，所以要进行多个代理设置，代理的设置和第四步一样
那么此时在 api 文件夹中就要配置两份 ，两份文件的配置基本一模一样，唯一的区别在于 各自的 baseUrl :
├── src
│ ├── api
... ... ├── axios.js
└── index.js
├── axios1.js
└── index1.js注：为了api文件夹的简介以及接口管理，对于多域名代理的，建议将对应的axios.js 和 index.js 两个js文件合并成一个js文件，怎么合并就不讲了，懂js的都会,不会的就反思一下，补充下基础知识。
/*---------------------------打开config/index.js-------------------------------------------*/
//将文件中的该项配置 proxyTable:{} 修改成如下配置
proxyTable: {
// 第一个后台接口域名代理
'/aaa': { // 这个aaa 要与 axios.js 文件中的 baseURL 值对应
target: 'http://sw.api.com', // 你第一个接口的域名
changeOrigin: true,
pathRewrite:{
'^/aaa':''
}
},
// 第二个后台接口域名代理
'/bbb': { // 这个bbb要与 axios1.js 文件中的 baseURL 值对应
target: 'http://sg.api.com', // 你第二个接口的域名
changeOrigin: true,
pathRewrite:{
'^/aaa':''
}
},
}
/*---------------------------(1) api/axios.js 文件的基路径配置,开发环境中的baseURL ----------------------------*/
let baseURL
// 判断开发环境（一般用于本地代理）
if (process.env.NODE_ENV === 'development') { // 开发环境
baseURL = '/aaa' // 对应上面的第一个代理名 aaa
} else { // 编译环境
if (process.env.type === 'test') { // 测试环境
baseURL = 'http://sw.apitest.com'
} else { // 正式环境
baseURL = 'http://sw.api.com'
}
}
/*---------------------------(2) api/axios1.js 文件的基路径配置,开发环境中的baseURL ----------------------------*/
let baseURL
// 判断开发环境（一般用于本地代理）
if (process.env.NODE_ENV === 'development') { // 开发环境
baseURL = '/bbb' // 对应上面的第二个代理名 bbb
} else { // 编译环境
if (process.env.type === 'test') { // 测试环境
baseURL = 'http://sg.apitest.com'
} else { // 正式环境
baseURL = 'http://sg.api.com'
}
}OK 关于ajaxi 基本用法以及代理设置，就讲到这了。有什么更有的配置，欢迎留言分享
vue项目配置2-项目目录结构,vue打包白屏,图片加载不出等问题