目录什么是axios?axios的请求类型?axios封装默认的自定义配置配置的加载优先级拦截器get请求post请求delete请求put请求:更新整个对象资源patch请求:更新对象的局部资源并发请求axios与ajax的区别?axios怎样自定...

目录
- 什么是axios?
- axios的请求类型?
- axios封装默认的自定义配置
- 配置的加载优先级
- 拦截器
- get请求
- post请求
- delete请求
- put请求:更新整个对象资源
- patch请求:更新对象的局部资源
- 并发请求
- axios与ajax的区别?
- axios怎样自定义封装?
什么是axios?
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
特性:
从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF
Promises
axios 依赖原生的 ES6 Promise 实现而被支持. 如果你的环境不支持 ES6 Promise,你可以使用 polyfill.
axios的请求类型?
安装好node的一套环境:
一下三种引用方式:
npm install axios -先在node中安装axios,api封装中引入axios即可
bower install axios --npm中安装 bower,在bower中引入axios包
bower:
Bower可以管理包含HTML,CSS,JavaScript,字体甚至图像文件的组件。Bower不会串联或缩小代码或执行其他任何操作-只会安装所需的正确版本的软件包及其依赖项。
直接vue中引入js文件
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
axios封装默认的自定义配置
配置的加载优先级
高到低顺序:
第一步:配置默认值 在请求中设置的配置项
instance.get('/longRequest', {
timeout: 5000
});
第二部:全局的 axios 默认值 在api文件中设置的配置项
instance.defaults.timeout = 2500;
第三步:自定义实例默认值 在创建axios实例中设置的配置项
var instance = axios.create();
拦截器
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
switch (err.response.status) {
case 400:
err.message = '错误请求';
break;
case 401:
err.message = '未授权,请重新登录';
break;
case 403:
err.message = '拒绝访问';
break;
case 404:
err.message = '请求错误,未找到该资源';
break;
case 405:
err.message = '请求方法未允许';
break;
case 408:
err.message = '请求超时';
break;
case 415:
err.message = '服务器无法处理请求附带的媒体格式';
break;
case 500:
err.message = '服务器出错';
break;
case 501:
err.message = '网络未实现';
break;
case 502:
err.message = '网络错误';
break;
case 503:
err.message = '服务不可用';
break;
case 504:
err.message = '网络超时';
break;
case 505:
err.message = 'http版本不支持该请求';
break;
default:
err.message = `连接错误${err.response.status}`;
}
} else {
err.message = '连接到服务器失败';
}
return Promise.resolve(err.response);
});
import Vue from ‘vue’; import axios from ‘axios’;
get请求
axios.get({
method:'get',
url:'xxxx',
reponseType:'',//相应类型
parems:{//入参
}
}).then(function(response){
....
})
post请求
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
}).then(function(res){
});
delete请求
axios({
method: 'delete',
url: '/user/12345',
//入参一:挂载到请求后面
parmes:{
}
//入参二:挂载到请求体内
data{
}
}).then(function(res){
});
put请求:更新整个对象资源
axios({
method: 'put',
url: '/user/12345',
data{
}
}).then(function(res){
});
patch请求:更新对象的局部资源
axios({
method: 'patch',
url: '/user/12345',
data{
}
}).then(function(res){
});
提供封装后的另一种写法: axios.get(url[, config]) axios.delete(url[, config]) axios.post(url[, data[, config]]) axios.put(url[, data[, config]]) axios.patch(url[, data[, config]])
并发请求
axios.all(iterable) axios.spread(callback) function getUserAccount() { return axios.get(’/user/12345’); }
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
//请求数组
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {//对应请求的响应体
// 两个请求现在都执行完成
}));
axios与ajax的区别?
axios: 从 node.js 创建 http 请求 支持 Promise API 客户端支持防止CSRF 提供了一些并发请求的接口(重要,方便了很多的操作) ajax: 3.JQuery整个项目太大,单纯使用ajax却要引入整个JQuery非常的不合理(采取个性化打包的方案又不能享受CDN服务)
axios怎样自定义封装?
1、建立接口请求封装、响应、拦截、认证、等基础配置文件 index.js
引入静态资源
import axios from 'axios';
import qs from 'qs';
import apiMap from './apiMap';
设置全局默认参数
axios.defaults.withCredentials = false;
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';
设置请求默认参数
const instance = axios.create({
baseURL: process.env.API_ROOT,
timeout: 15 * 1000,
auth: {
...
},
headers: {
'Content-Type': 'application/json;charset=utf-8',
'X-Requested-With': 'XMLHttpRequest',
},
},
);
设置请求拦截:
instance.interceptors.request.use(function (config) {
...
})
设置相应拦截:
// 响应拦截器即异常处理
instance.interceptors.response.use(response =>
response
, (err) => {
if (err && err.response) {
switch (err.response.status) {
case 400:
err.message = '错误请求';
break;
case 401:
err.message = '未授权,请重新登录';
break;
case 403:
err.message = '拒绝访问';
break;
case 404:
err.message = '请求错误,未找到该资源';
break;
case 405:
err.message = '请求方法未允许';
break;
case 408:
err.message = '请求超时';
break;
case 415:
err.message = '服务器无法处理请求附带的媒体格式';
break;
case 500:
err.message = '服务器出错';
break;
case 501:
err.message = '网络未实现';
break;
case 502:
err.message = '网络错误';
break;
case 503:
err.message = '服务不可用';
break;
case 504:
err.message = '网络超时';
break;
case 505:
err.message = 'http版本不支持该请求';
break;
default:
err.message = `连接错误${err.response.status}`;
}
} else {
err.message = '连接到服务器失败';
}
return Promise.resolve(err.response);
});
封装接口请求:
let api={
/**
* get 方法封装
* @param url
* @param params
* @returns {Promise}
*/
get (url, params = {}) {
return new Promise((resolve, reject) => {
instance.get(apiMap[url],params).then(res => {
resolve(res.data)
}).catch(err => {
reject(err)
})
})
},
/**
* post
* @param url
* @param params
* @returns {Promise}
*/
post (url, params = {}) {
return new Promise((resolve, reject) => {
instance.post(apiMap[url], params)
.then(res => {
resolve(res.data)
}, err => {
reject(err)
})
})
},
/**
* delete 方法封装
* @param url
* @param params
* @returns {Promise}
*/
delete (url, params = {}) {
return new Promise((resolve, reject) => {
instance.delete(apiMap[url] ,params).then(res => {
resolve(res.data)
}).catch(err => {
reject(err)
})
})
},
/**
* put 方法封装
* @param url
* @param params
* @returns {Promise}
*/
put (url, params = {}) {
return new Promise((resolve, reject) => {
instance.put(apiMap[url], params).then(res => {
resolve(res.data)
}).catch(err => {
reject(err)
})
})
},
/**
* patch 方法封装
* @param url
* @param params
* @returns {Promise}
*/
patch (url, params = {}) {
return new Promise((resolve, reject) => {
instance.patch(apiMap[url], params).then(res => {
resolve(res.data)
}).catch(err => {
reject(err)
})
})
}
}
export default api;
2、创建一个key-vlue形式的接口文件,方便接口请求管理 apiMap.js
export default {
// 主题列表
key: 'path'
};
3、将index文件引入vue入口文件中
引入vue资源
import Vue from 'vue'
引入viewui插件
import ViewUI from 'view-design';
引入viewuicss文件
import 'view-design/dist/styles/iview.css';
导入文件|默认不需要加文件后缀
import Api from '/index';
全局绑定|$ 为实例属性设置作用域
Vue.prototype.$api = Api;
全局参数配置:
创建配置文件index.js:
import Vue from 'vue';
import Vuex from 'vuex';
import State from './state';
Vue.use(Vuex);
const store = new Vuex.Store(State);
export default store;
创建全局参数详细文件state.js
export default {
state: { //这里放全局参数
test: 0
},
mutations:{ //设置值
test(state,value)=>state.test=value;
},
getters:{//返回值
test: state =>state.test;
}
};
调用方式:
var data = this.$store.getter.test;
var data = this.$store.commit('test',数据);
Vue.use(Vuex); 判断vue是否已经注册过vuex插件; 将vuexInit函数混入到vue的beforeCreate生命周期中; 实例化vue时,会在vue每个实例上添加
s
t
o
r
e
属
性
,
并
将
v
u
e
x
的
实
例
绑
定
到
store属性,并将vuex的实例绑定到
store属性,并将vuex的实例绑定到store属性上。