axios的特点
1. 支持浏览器和node.js
2. 支持promise
3. 能拦截请求和响应
4. 能转换请求和响应数据
5. 能取消请求
6. 自动转换JSON数据
7. 浏览器端支持防止CSRF(跨站请求伪造)
axios提问axios异步请求同步化处理？//使用 asyns/await async getHistoryData (data) {
try {
let res = await axios.get(‘/api/survey/list/‘, {
params: data
})
this.tableData = res.data.result
this.totalData = res.data.count
} catch (err) {
console.log(err)
alert(‘请求出错！‘)
}
}为何官方推荐使用axios而不用vue-resource？
在Vue1.x中，官方推荐使用的ajax库是vue-resource。到了Vue2.x，官方（尤大）推荐的ajax库改为了Axios，按照说法是因为已有一个更完备的轮子，就不需要造一个新的。
你了解axios的原理吗？有看过它的源码吗？
axios吗？主要是封装哪方面的？import axios from ‘axios‘
import {getToken} from ‘@/utils/auth‘
const service = axios.create({
baseURL: process.env.BASE_API, // url = base url + request url
timeout: 5000
})
// request拦截器
service.interceptors.request.use(
config => {
// do something before request is sent
config.headers[‘x-access-token‘] = getToken()
return config
},
error => {
// do something with request error
console.log(error) // for debug
return Promise.reject(error)
}
)
// response拦截器
service.interceptors.response.use(
response => {
/**
* 1.code为非000000是抛错 可结合自己业务进行修改
* 2.response 是 http 封装的实体类，response.data 使我们真正的响应数据
*/
// const res = response.data
// console.log("拦截前的response:",response);
return response.data
},
error => {
console.log(‘err‘ + error) // for debug
return Promise.reject(error)
}
)
export default service
/**
* Created by czx on 2020/1/17.
*/
import request from ‘./request‘
import qs from ‘qs‘
// qs.parse()将URL解析成对象的形式;qs.stringify()将对象 序列化成URL的形式，以&进行拼接
const Http = {}
Http.request = request
/**
* @desc Http表单方式提交
* @param url 请求的url 参数 /loginAsync.do
* @parrm method 请求方法类型 类似post get
* @param params {} 参数对象 data: {username: username, password: password},
*/
Http.commitForm = function (url, params, config = {}) {
const _config = {
url,
method: ‘post‘,
data:params,
headers: {
‘Content-Type‘: ‘application/x-www-form-urlencoded‘
},
transformRequest: params => qs.stringify(params, { arrayFormat: ‘repeat‘ })// 修改数组传递格式
}
config = Object.assign(config, _config)
return request(config)
}
/*
* JSON格式的接口，默认为post请求
* 传入 config={method: ‘get‘}则变为get请求
*/
Http.Json = function(url, params, config = {}) {
const _config = {
method: ‘post‘,
url: url,
data: params,
headers: {
‘Content-Type‘: ‘application/json‘
}
}
config = Object.assign(_config, config)
return request(config)
}
Http.JsonPic = function(url, params) {
return request.post(url, params)
}
Http.post = function(url, params, config = {}) {
const _config = {
method: ‘post‘,
url: url,
data: params,
headers: {
‘Content-Type‘: ‘application/x-www-form-urlencoded‘
},
transformRequest: function(params) {
return qs.stringify(params, { arrayFormat: ‘repeat‘ }) // 修改数组传递格式
}
}
config = Object.assign(_config, config)
return request(config)
}
Http.get = function(url, params, config = {}) {
const _config = {
method: ‘get‘,
url: url,
params: params,
headers: {
‘Content-Type‘: ‘application/x-www-form-urlencoded‘
},
paramsSerializer: function(params) {
return qs.stringify(params, { arrayFormat: ‘repeat‘ }) // 修改数组传递格式
}
}
config = Object.assign(_config, config)
return request(config)
}
/*Http.mapUrl = function(url, params) {
if (typeof params === ‘object‘) {
params = encodeUrlParam(params)
} else {
params = null
}
if (params) {
if (url.indexOf(‘?‘) >= 0) {
url += ‘&‘ + params
} else {
url += ‘?‘ + params
}
}
if (!process.env.BASE_API || process.env.BASE_API === ‘/‘ || process.env.BASE_API === ‘‘) {
return window.location.origin + url
}
return process.env.BASE_API + url
}*/
export default Http
import Cookies from ‘js-cookie‘
const TokenKey = ‘x-access-token‘
export function getToken() {
return Cookies.get(TokenKey)
}
export function setToken(token) {
return Cookies.set(TokenKey,token)
}
export function removeToken() {
return Cookies.remove(TokenKey)
}
import Http from ‘@/utils/http.js‘ export function login(param) { return Http.post(‘/login‘,param) } export function register(param) { return Http.post(‘/register‘,param) }
import {login, register} from ‘@/api/login‘
5. 如何中断（取消）axios的请求？
export default { data() { return {cancelTokenFn: null} }, methods: { cancelTokenDone() { const _this = this const CancelToken = axios.CancelToken; this.cancelTokenFn && this.cancelTokenFn(); this.cancelTokenFn = null; axios.get(‘url‘, { cancelToken: new CancelToken(function executor(c) { _this.cancelTokenFn = c }) }) .then(function (response) { const data = response.data; console.log(data); }) .catch(function (error) { console.log(error) }) } } }
this.cancelTokenFn()
axios怎么解决跨域的问题？
如果 server 端是自己开发的，那么修改相关代码支持跨域即可。如果不是自己开发的，那么可以自己写个后端转发该请求，用代理的方式实现。
跨域这个行为是浏览器禁止（浏览器不允许当前页面的所在的源去请求另一个源的数据）的，但是服务端并不禁止
源指协议、端口、域名。只要这个3个中有一个不同就是跨域。 这里列举一个经典的列子：
协议跨域：
http://a.baidu.com访问https://a.baidu.com；
端口跨域：
http://a.baidu.com:8080访问http://a.baidu.com:80；
域名跨域：
http://a.baidu.com访问http://b.baidu.com；
关键字:Access-control-Allow-origin、跨域
A） 开发模式下，可以在config中配置proxyTable即可
B） 服务端基于spring实现
C） CORS：①即跨源资源共享，它定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求。 ②它是一个妥协，有更大的灵活性，但比起简单地允许所有这些的要求来说更加安全。③但是CORS也具有一定的风险性，比如请求中只能说明来自于一个特定的域但不能验证是否可信，而且也容易被第三方入侵。 ④这里一般需要后端配合,开启cors。一般各种语言都有类似的包。比如NodeJS的koa2-cors
D） Nginx代理proxy
E） express代理
请求头自动携带cookie时:config中配置withCredentials:true，否则为false【看到有人说：withCredentials为true的情况下，后端要设置Access-Control-Allow-Origin为你的源地址，例如http://localhost:8080，不能是*，而且还要设置header(‘Access-Control-Allow-Credentials: true‘)】
config中配置qs：避开ajax信使请求，并兼容Android？
import Qs from ‘qs‘
原文：https://www.cnblogs.com/shine-lovely/p/12780756.html