axios技术总结（包括跨域的处理）

在路上的小小前端程序猿vue经验分享

1. axios与vue-axios

概念：

axios是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中（理解成库）
vue-axios用于将axios集成到Vuejs的小型包装器（理解成插件）

安装

axios:
使用 npm:

npm install axios

使用 bower:

bower install axios

使用 cdn:

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

vue-axios：

npm install --save axios vue-axios

使用：
一般来说这两者需要同时安装使用
在mian.js中加入以下代码：

//导入axios vue-axios
import Axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, Axios)

在发起请求的vue文件里加入以下代码

//三种get请求方式
Vue.axios.get(api).then((response) => {
  console.log(response.data)
})
 
this.axios.get(api).then((response) => {
  console.log(response.data)
})
 
this.$http.get(api).then((response) => {
  console.log(response.data)
})

2.跨域处理

找到config文件中的index.js，修改proxyTable如下：

  dev: {
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api/**': {
          target: 'http://www.bs.com:80',//请求的域名，最好写完整不然容易出错
          changeOrigin: true,  //是否跨域
          pathRewrite:{
              '^/api':'/api'
          }
      },
    },

这里我有个疑惑，pathRewrite我不写或者写成这两种方式都没报错

pathRewrite:{
              '^/api':'/api'
         	}
          
pathRewrite:{
			'^/api':'/'
			}

便捷操作：
为了在用axios发起请求时每次不需要再写api前缀，在main.js文件加入以下代码：

Axios.defaults.baseURL = 'api'

这个前缀本应该区分开发环境和生产环境，但是我个人认为我这项目应该是开发环境，所以没有动态对不同环境加以匹配。当然我这上面写的没有报错

如果跟着上面走了一遍，报错的话。记得重新npm run dev

以上是我的个人总结,参考了不少资料和大佬博文：
1.https://www.kancloud.cn/yunye/axios/234845
2.https://segmentfault.com/a/1190000011715088
3.`https://www.jianshu.com/p/d65e4d67884a

感谢收看，觉得有用的点赞可好，