vue-cli(vue2.x)中使用axios

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。

特性

浏览器端发起XMLHttpRequests请求
Node端发起http请求
支持Promise API
拦截请求和响应
转化请求和响应(数据)
取消请求
自动转化json数据
客户端支持抵御XSRF(跨站请求伪造)

1、在项目根目录下使用npm安装

npm install axios --save

2、全局引入axios

在入口处文件(main.js)引入axios并原型化axios。

import axios from 'axios'

//Vue.use(axios)  // 注意 这样的用法是有问题的,axios不支持Vue.use()的声明方式
Vue.prototype.$ajax = axios
// 只是import进来是无法使用 axios 命令的。所以我们将 axios 改写为 Vue 的原型属性。那么在其他组件中就能使用$ajax方法了
3、使用axios

可以直接在任意组件中的js代码处使用this.$ajax()方法来请求接口数据了。

this.$ajax({
        method: 'get', //请求方式
        url: '请求接口地址'
      })
      .then(function (res) { //成功请求的回调函数
        console.log(res)
      })
      .catch(function (error) {  //请求失败的回调函数
        console.log(error)
      })

猜你喜欢

转载自blog.csdn.net/m0_38134431/article/details/83785946