axios怎么用

安装

npm install axios --save

直接使用线上axios

<script src="https://unpkg.com/axios/dist/axios.min.js">

// 在Vue中可以ES6语法这样写
import axios from axios
axios.get()

// 如果要全局配置可以在min.js文件中这样引入
Vue.prototyre.$axios = axios
this.$axios.get()

</script>

说了这么多，该怎么使用他呢，来看一个例子

axios.get('https://editor.csdn.net/md?articleId=106891325', {
	params: {
		id: 6
	}
}),
.theh( res => {
	console.log('请求到的数据是:' res )
})
.catch( (err) => {
	console.log('数据获取失败')
})

如果是post请求该怎么写呢？ post方法的第二个参数为请求参数对象

axios.post('https://editor.csdn.net/md?articleId=106891325', {
	name: '小伙子'
}),
.theh( function(res) {
	console.log('请求到的数据是:' res )
})
.catch( function(err) {
	console.log('数据获取失败')
})

可以发送多个请求吗，来看下面的操作

可以写多个请求函数，这里以两个为例，利用axios的.all()方法接收一个由每个请求函数组成的数组，如果全部请求成功，在axios.spread()方法接收一个回调函数，该函数的参数即是每个请求所返回的结果。

function userCount () {
	return axios.get('/user/xxx')
},
function userAccount () {
	return axios.get('/user/xxx/123')
},
this.$axios.all(
	[userCount(), userAccount()]
)
.then(axios.spread(function (res1, res2) {
//当这两个请求都完成的时候会触发spread函数，res1、res2代表返回的结果
	console.log(res1);
	console.log(res2)
}))

axios为所有请求方式都提供了别名

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])

axios该怎么配置默认值

• 通过axios.defaults配置全局的默认值，对所有的请求都可以生效。

axios.defaults.headers.common['token'] = ''
axios.defaults.headers.post['Content-type'] = 'application/json'
axios.defaults.baseURL = 'https://baike.xx.com'

• 通过自定义实例的默认值，以及修改实例的配置

// 创建时自定义默认配置，超时设置为全局默认值0秒
let xx = axios.create({
	baseURL: 'www.taobao.com',
	params: {
		name: 'xxx'
	}
})
// 修改配置后，超时设置为4秒
xx.defaults.timeout: 4000

axios的拦截器

工作原理： 可以分别设置请求拦截和响应拦截，在发出请求和响应到达.then之前进行判断处理

• 请求拦截器

axios.intercaptors.response.use(
res => {
	if (res) {
		return res
	}
},
err => {
		return Promise.reject(err)
	}
)

• 对于请求拦截器把response换成request。第一个参数是成功时的回调，第二个参数是错误时的回调。

取消请求

• 取消请求的话需要先通过创建一个CancelToken.source工厂函数创建一个标识source
• 通过配置项制定标识，这样才知道取消的是哪个请求
• 调用取消方法

var CancelToken = axios.CancelToken;
//第一步
var source = CancelToken.source(); 
axios.post('/user/xx', {
  name: 'new xx'
}, {
  //第二步
  cancelToken: source.token 
})
//第三步
source.cancel('我的请求被取消了'); 

或者这样写：

// 把cancelToken的构造函数传递给配置项
// 该构造函数接受一个函数作为参数，在这个函数中指定标识符。
var CancelToken = axios.CancelToken;
var cancel;
axios.get('/app/xx/get', {
  baseURL: 'http://www.taobao.com',
  cancelToken: new CancelToken(function executor(c) {
    cancel = c;
  })
});
cancel();

关于请求跨域的配置

在工作中请求服务端数据时难免会出现跨域的问题，那么可以在配置文件里设置代理，vue-cli项目，需要在根目录自己创建一个vue.config.js的文件，在里面可以这样进行配置

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        //目标路径，必须加上http和端口号
        target: 'https://www.xxx.com', 
        //是否跨域
        changeOrigin: true, 
        ws: true,
        pathRewrite: {
        //重写路径
          '^/api': '' 
        }
      }
    }
  }
};

调用接口：

axios.post('/api/test', {name: 'haha'});

如果不重写路径，访问的就是http://www.xxx.com/api/test，如果那么重写路径访问的就是http://www.xxx.com/test

最后来说一下请求跨域的原理

因为浏览器的同源策略的现象，客户端在请求服务端的数据时会发生跨域问题的，而服务器和服务器之间可以相互请求数据，是没有跨域的概念（如果服务器没有设置禁止跨域的权限问题），也就是说，我们可以配置一个代理的服务器可以请求另一个服务器中的数据，然后把请求出来的数据返回到我们的代理服务器中，代理服务器再返回数据给我们的客户端，这样我们就可以实现跨域访问数据了。
另外可以再去了解一下jsonp，iframe是怎么解决跨域问题的