vue-axios

什么是axios

axios是一个基于Promise的Http库，可以用在node.js环境和浏览器中

功能特点

在浏览器中发送XMLHttpRequests
在node.js中发送Http请求
支持Promise
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换json数据
客户端支持防御XSRF

安装axios

npm安装

npm install axios --save

引用
直接script标签引用

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

axios的基本使用

发送get 请求

get（）中
参数1：请求地址 必选
参数2：参数 可选

axios
  .get('http://rap2api.taobao.org/app/mock/23080/resources/search',{
      params: {
         id: 5
      }
   })
  .then(res => {
    console.log('数据是:', res);
  })
  .catch((e) => {
    console.log('获取数据失败');
  });

发送post 请求

参数1：请求地址
参数2：参数

this.$axios.post('http://rap2api.taobao.org/app/mock/121145/post',{
  name: '小月'
})
.then(function(res){
  console.log(res);
})
.catch(function(err){
  console.log(err);
});

发送合并请求

分别写两个请求函数，利用axios的all方法接收一个由每个请求函数组成的数组，可以一次性发送多个请求，如果全部请求成功，在axios.spread方法接收一个回调函数，该函数的参数就是每个请求返回的结果。

function getUserAccount(){
  return axios.get('/user/12345');
}
function getUserPermissions(){
  return axios.get('/user/12345/permissions');
}
this.$axios.all([getUserAccount(),getUserPermissions()])
  .then(axios.spread(function(res1,res2){
    //当这两个请求都完成的时候会触发这个函数，两个参数分别代表返回的结果
}))

axios的API

以上通过axios直接调用发放来发起对应的请求其实是axios为了方便起见给不同的请求提供的别名方法。我们完全可以通过调用axios的API，传递一个配置对象来发起请求。

发送post请求，参数写在data属性中

axios({
  url: 'http://rap2api.taobao.org/app/mock/121145/post',
  method: 'post',
  data: {
    name: '小月'
  }
}).then(res => {
  console.log('请求结果：', res);
});

发送get请求，默认就是get请求，直接第一个参数写路径，第二个参数写配置对象，参数通过params属性设置。

axios('http://rap2api.taobao.org/app/mock/121145/get', {
  params: {
    name: '小月'
  }
}).then(res => {
  console.log('请求结果：', res);
});

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.defaults.baseURL = 'http://127.0.0.1:8100/test';
axios.defaults.headers.contentType = "application/json;charset=UTF-8";
axios.defaults.headers.common['Authorization'] = 'AUTH_TOKEN'

跨域配置

如果我们要跨域请求数据，在配置文件里设置代理，vue-cli3项目，需要在根目录自己创建一个vue.config.js，在里面写配置。

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

调用接口：

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

原理：

因为客户端请求服务端的数据是存在跨域问题的，而服务器和服务器之间可以相互请求数据，是没有跨域的概念（如果服务器没有设置禁止跨域的权限问题），也就是说，我们可以配置一个代理的服务器可以请求另一个服务器中的数据，然后把请求出来的数据返回到我们的代理服务器中，代理服务器再返回数据给我们的客户端，这样我们就可以实现跨域访问数据啦。