vue框架搭建之axios使用教程

1.安装axios

cnpm install axios --save-dev

2、main.js 文件中引入：

import Vue from 'vue'

//引入
vue import axios from 'axios'

//把axios挂载到vue上
axios Vue.prototype.$axios = axios;

3.在自己的组件文件中使用

getlist(){    
 this.$axios({
    method: "get",
    url: "www.xx.com/list",
    data: {
      name: "",
      age: ""
    }
  })  
  .then(function(res){ 
    //接口成功返回结果执行   
  })
  .catch(function(err){
    //then()中的代码发生错误时执行
  })
}

4、跨域与代理 在vue本地开发时请求总是发生跨域 解决方案：配置代理 config 下的index.js 文件

`proxyTable: {`
`'/business-app/*'``: {`
`target:` `'[http://](http:)****:8080'``,//被代理的接口`
`changeOrigin:` `true``,`
`secure:``true` `// 如果是https接口，需要配置这个参数`
`}`
`},`

• 当URL以 '/business-app/'层级开端时，把 'http://****:8080' 代理成本地IP

5、 baseURL与代理

两者用途不一样， baseUrl会附加到你绑定的axios实例（如果是全局的，那就是所有实例）上，即如果get/post的url参数是相对路径（如） /api/c/xx，那就会执行 baseUrl + '/api/c/xx',如果未指定baseUrl，那就走浏览器地址栏里的base + baseUrl。 webpack里的proxyTable是测试环境为了避免浏览器下的跨域访问，而以nodejs代理成同前端页面（即浏览器地址栏）同域的一种处理。指定proxyTable后， axios就不需要指定baseUrl了。proxyTable会把base + '/api/c/xx'代理到【base baseUrl + '/api/c/xx'】的接口地址上。 当然工程发布时，后端和前端也需要发布到同一个域下。

6、axios与vue-axios 先看两者的用法处。

Vue.prototype.$axios = axios
和
import Vueaxios from ‘vue-axios'
Vue.use(VueAxios,axios)