Axios

axios的简介

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：

• 从浏览器中创建 XMLHttpRequest
• 从 node.js 发出 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求和响应数据
• 取消请求
• 自动转换JSON数据
• 客户端支持防止 CSRF/XSRF

安装 axios

npm install axios

引入加载

import axios from 'axios'

将axios全局挂载到Vue原型上

Vue.prototype.$http = axios;

发出请求 以Vue中文社区为例子(官网提供的 API)

getData () {
  this.$http.get('https://www.vue-js.com/api/v1/topics')
    .then((response) => {
      console.log(response)
    })
    .catch((error) => {
      console.log(error)
    })
}

axios 是基于 Promise 的，可以使用 then 和 catch 。

在发送请求时，可以传递参数，参数的传递有两种方式：

• 对象

getData () {
  this.$http.get('https://www.vue-js.com/api/v1/topics, {
    params: {
      page: 1,  // 页码
      limit: 20  // 每页显示的数量
    }
  }')
    .then((response) => {
      console.log(response)
    })
    .catch((error) => {
      console.log(error)
    })
}

• 类似于查询字符串

getData () {
  this.$http.get('https://www.vue-js.com/api/v1/topics?page=1&limit=20')
    .then((response) => {
      console.log(response)
    })
    .catch((error) => {
      console.log(error)
    })
}

axios 发送 post 请求

POST传递数据有两种格式：

• form-­data ?page=1&limit=48
• x-­www-­form­-urlencoded { page: 1,limit: 10 }
• 在axios中，post请求接收的参数必须是form­-data
  qs插件—­qs.stringify

postData () {
  this.$http.post(url, {
    params: {
      page: 1,
      limit: 20
    }
  })
    .then((response) => {
      console.log(response)
    })
    .catch((error) => {
      console.log(error)
    })
}

这种写法是不可行的，后台接收到的数据会是 x-www-form-urlencoded 格式。

使用 qs 插件

安装 qs 插件
npm install qs
引入 qs：
import qs from 'qs'

postData () {
  this.$http.post(url, qs.stringify({
    params: {
      page: 1,
      limit: 20
    }
  }))
    .then((response) => {
      console.log(response)
    })
    .catch((error) => {
      console.log(error)
    })
}

使用 qs.stringify 方法，将对象转变成字符串，后台接收到的是 form-data 格式。