07与服务端通信axios

axios

axios是什么

axios 是一个Http 库，简单的讲就是可以发送get、post请求。
由于Vue、React等框架的出现，促使了 axios轻量级库的出现。

axios的特性

• 可以在浏览器中发送 XMLHttpRequests
• 可以在 node.js 发送 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 能够取消请求
• 自动转换 JSON 数据
• 客户端支持保护安全免受 XSRF 攻击

安装

npm install axios --save

当前axios版本

npm axios -v

axios的使用

main.js中通过import引用axios

import Axios from  'axios'

将Axios绑定到Vue的原型上,后期可通过this.$axios调用axios

Vue.prototype.$axios = Axios

get请求

Post请求

跨域

跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据。源指协议，端口，域名。只要这个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；

在config的index.j中配置，配置完成后需要重启项目

 proxyTable: {
  '/api': {
    target:'http://111.229.37.167/api',// 你请求的第三方接口
    changeOrigin:true,// 允许跨域
    pathRewrite:{ // 路径重写，
      '^/api': '' // 替换target中的请求地址，也就是说以后你在请求http://api.douban.com/v2/xxxxx这个地址的时候直接写成/api即可
    }
  }
},

添加默认配置信息，将baseURL设置为我们刚刚添加的标签名

Axios.defaults.baseURL = '/api';

实例