原创

vue引入axios

前言:

vue2.0之后,就不再对 vue-resource 更新,而是推荐使用 axios。基于 PromiseHTTP 请求客户端,可同时在浏览器和 Node.js 中使用。

功能特性

1、在浏览器中发送 XMLHttpRequests 请求
2、在 node.js 中发送 http 请求
3、支持 Promise API
4、拦截请求和响应
5、转换请求和响应数据
6、取消请求
7、自动转换 JSON 数据
8、客户端支持保护安全免受 CSRF/XSRF 攻击

安装方法:

1、安装 axios

npm install axios --save-dev

2、在 main.js 中导入

// 引入axios进行地址访问
import axios from 'axios';
// 不使用use来使用该例,而是用prototype原型来使用
Vue.prototype.$http = axios;

3、配置跨域后端接口请求

//跨域请求
proxyTable: {
    '/api': {
    // 后端接口地址
    target: 'http://127.0.0.1:18080',
    changeOrigin: true,
    pathRewrite: {
        '^/api': ''
        }
   }
},

配置完成后可直接在 npm run dev 时直接访问后台地址,前缀比真实后台是多了个 /api

4、不配置跨域请求直接使用,在 methods 添加一个方法,代码如下

getMethod (){
    //这里是get,同理,其他请求也是一样的
    this.$http.get('请求地址').then(res => {
    //这里对返回的数据进行处理
   })
}

然后 template 中添加一个点击事件去触发时间,就能看到我们的请求了

正文到此结束
相关文章
本文目录