下载
cnpm install axios --save
API
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]]) //修改局部
//get带参是在后面的一个配置对象,且params后面是一个对象,不能是字符串或数字
axios.get('http://47.106.244.1:8099/manager/user/findAllUser', { params: obj })
//post带参直接传数据对象
axios.post('http://47.106.244.1:8099/manager/user/findAllUser', obj)
如果get方式的带参的配置对象里的params不是一个对象,而是一个字符串或者数组,会被解析成属性名是0,属性值为传入的数据
其他请求方式的开发为Restful风格
常用的HTTP动词有下面五个(括号里是对应的SQL命令)
GET(SELECT):从服务器取出资源(一项或多项)。
POST(CREATE):在服务器新建一个资源。
PUT(UPDATE):在服务器更新资源(客户端提供改变后的完整资源)。
PATCH(UPDATE):在服务器更新资源(客户端提供改变的属性)。
DELETE(DELETE):从服务器删除资源。
还有两个不常用的HTTP动词。
HEAD:获取资源的元数据。
OPTIONS:获取信息,关于资源的哪些属性是客户端可以改变的。
下面是一些例子
GET /zoos:列出所有动物园
POST /zoos:新建一个动物园
GET /zoos/ID:获取某个指定动物园的信息
PUT /zoos/ID:更新某个指定动物园的信息(提供该动物园的全部信息)
PATCH /zoos/ID:更新某个指定动物园的信息(提供该动物园的部分信息)
DELETE /zoos/ID:删除某个动物园
GET /zoos/ID/animals:列出某个指定动物园的所有动物
DELETE /zoos/ID/animals/ID:删除某个指定动物园的指定动物
除了用axios引入的js文件里产生的axios对象发请求,还可以axios创建的实例去发---可以设定默认配置。
//axios.create()
//可以放配置对象,也可不放,不放创建出来的就是一个没有任何默认配置的实例
let instance = axios.create({
method: 'post',
headers: {
"Auth2": "token123"
},
timeout: 2000, //两秒后超时
baseURL: 'http://47.106.244.1:8099' //基础路径,发请求的时候会自动接上,除非是完整的url
});
instance.get('http://47.106.244.1:8099/manager/user/findAllUser')
可以设置不同的axios实例访问不同的服务器(设置baseURL)
配置对象
请求配置
{
// `url` 是用于请求的服务器 URL
url: '/user',
// `method` 是创建请求时使用的方法
method: 'get', // default
// `baseURL` 将自动加在 `url` 前面,除非 `url` 是一个绝对 URL。
// 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
baseURL: 'https://some-domain.com/api/',
// `transformRequest` 允许在向服务器发送前,修改请求数据
// 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
// 后面数组中的函数必须返回一个字符串,或 ArrayBuffer,或 Stream
transformRequest: [function (data, headers) {
// 对 data 进行任意转换处理
return data;
}],
// `transformResponse` 在传递给 then/catch 前,允许修改响应数据
transformResponse: [function (data) {
// 对 data 进行任意转换处理
return data;
}],
// `headers` 是即将被发送的自定义请求头
headers: {'X-Requested-With': 'XMLHttpRequest'},
// `params` 是即将与请求一起发送的 URL 参数
// 必须是一个无格式对象(plain object)或 URLSearchParams 对象
params: {
ID: 12345
},
// `paramsSerializer` 是一个负责 `params` 序列化的函数
// (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
paramsSerializer: function(params) {
return Qs.stringify(params, {arrayFormat: 'brackets'})
},
// `data` 是作为请求主体被发送的数据
// 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
// 在没有设置 `transformRequest` 时,必须是以下类型之一:
// - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
// - 浏览器专属:FormData, File, Blob
// - Node 专属: Stream
data: {
firstName: 'Fred'
},
// `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
// 如果请求话费了超过 `timeout` 的时间,请求将被中断
timeout: 1000,
// `withCredentials` 表示跨域请求时是否需要使用凭证
withCredentials: false, // default
// `adapter` 允许自定义处理请求,以使测试更轻松
// 返回一个 promise 并应用一个有效的响应 (查阅 [response docs](#response-api)).
adapter: function (config) {
/* ... */
},
// `auth` 表示应该使用 HTTP 基础验证,并提供凭据
// 这将设置一个 `Authorization` 头,覆写掉现有的任意使用 `headers` 设置的自定义 `Authorization`头
auth: {
username: 'janedoe',
password: 's00pers3cret'
},
// `responseType` 表示服务器响应的数据类型,可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
responseType: 'json', // default
// `responseEncoding` indicates encoding to use for decoding responses
// Note: Ignored for `responseType` of 'stream' or client-side requests
responseEncoding: 'utf8', // default
// `xsrfCookieName` 是用作 xsrf token 的值的cookie的名称
xsrfCookieName: 'XSRF-TOKEN', // default
// `xsrfHeaderName` is the name of the http header that carries the xsrf token value
xsrfHeaderName: 'X-XSRF-TOKEN', // default
// `onUploadProgress` 允许为上传处理进度事件
onUploadProgress: function (progressEvent) {
// Do whatever you want with the native progress event
},
// `onDownloadProgress` 允许为下载处理进度事件
onDownloadProgress: function (progressEvent) {
// 对原生进度事件的处理
},
// `maxContentLength` 定义允许的响应内容的最大尺寸
maxContentLength: 2000,
// `validateStatus` 定义对于给定的HTTP 响应状态码是 resolve 或 reject promise 。如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`),promise 将被 resolve; 否则,promise 将被 rejecte
validateStatus: function (status) {
return status >= 200 && status < 300; // default
},
// `maxRedirects` 定义在 node.js 中 follow 的最大重定向数目
// 如果设置为0,将不会 follow 任何重定向
maxRedirects: 5, // default
// `socketPath` defines a UNIX Socket to be used in node.js.
// e.g. '/var/run/docker.sock' to send requests to the docker daemon.
// Only either `socketPath` or `proxy` can be specified.
// If both are specified, `socketPath` is used.
socketPath: null, // default
// `httpAgent` 和 `httpsAgent` 分别在 node.js 中用于定义在执行 http 和 https 时使用的自定义代理。允许像这样配置选项:
// `keepAlive` 默认没有启用
httpAgent: new http.Agent({ keepAlive: true }),
httpsAgent: new https.Agent({ keepAlive: true }),
// 'proxy' 定义代理服务器的主机名称和端口
// `auth` 表示 HTTP 基础验证应当用于连接代理,并提供凭据
// 这将会设置一个 `Proxy-Authorization` 头,覆写掉已有的通过使用 `header` 设置的自定义 `Proxy-Authorization` 头。
proxy: {
host: '127.0.0.1',
port: 9000,
auth: {
username: 'mikeymike',
password: 'rapunz3l'
}
},
// `cancelToken` 指定用于取消请求的 cancel token
// (查看后面的 Cancellation 这节了解更多)
cancelToken: new CancelToken(function (cancel) {
})
}
默认配置
axios.defaults.baseURL = 'https://api.example.com'; //设置基础路径
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; //common 设置post、get的头部
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; //设置post头部
响应数据
{
config:{}, //axios对request的配置
data:{}, //后台返回的数据
headers:{}, //服务器头部信息
request:{} //request对象
status:200, //状态码
statusText: 'OK', //状态信息
}
![](https://i-blog.csdnimg.cn/blog_migrate/fa0b9a6c6220fe421011f85b75d0e06e.png)
拦截器
拦所有的请求和所有响应,所有的请求都会经过它。
在所有请求或响应被 then 或 catch 处理前拦截它们。
请求拦截:在请求发送到服务器之前进行拦截,用于在发送请求之前的最后配置。拦住请求进行一些处理后再发。
let arr = ['/user/login', '/manager/user/findAllUser'];
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
/*if (config.url != '/user/login' && config.method == 'post') {
console.log(config.data); //显示的有点奇怪,看起来是字符串,但其实是一个对象!!!!
config.data = qs.stringify(config.data)
}*/
if(arr.includes(config.url)){
//做其他处理
}
return config; //返回配置对象
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
比如所有的post类型发送数据,只有一个功能的请求是需要json数据,其他的都是需要表单数据,这是就可以单独拦截一下,改一下数据类型再发送请求。然后以后所有发post请求的时候只用传对象数据就行,不用再转数据。
响应拦截:响应被用户获取之前拦截,用于对响应信息的过滤和封装
如果觉得axios的响应数据里拿数据太麻烦,就可以自己封装响应对象。
可以为自定义 axios 实例添加拦截器
instance.interceptors.request.use(function () {/*...*/});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
let res = {
...response,
test: '123',
data: response.data.data, //覆盖数据
status: response.data.status, //默认HTTP的状态码,可以改成后台的操作码
statusText: response.data.message
}
return res;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
移除拦截器
const myInterceptor = axios.interceptors.request.use(function () {/*...*/}); //需要用变量接收一个拦截器
axios.interceptors.request.eject(myInterceptor);
的到达