axios的使用（详细版）

axios

文档
axios是一个封装好的独立的ajax请求库, 基于Promise。支持在浏览器和Node中使用

使用

我们可以在我们的页面中引入axios.js，然后使用axios相关功能

<script src="axios.js路径"></script>

请求方法

GET、DELETE

axios.请求方法(get, delete)("接口文档的接口地址", {
  params: {
    接口文档中的参数: "要携带的值"
  }
}).then(res => {
  // res.data就是结果
}).catch(err => {
  // err就是捕获的错误信息
})

例如：

axios.get('http://xxxx/com/api/demo', {
  params: {
    key: "value"
  }
}).then(res => {

})

POST、PUT、PATCH

axios.请求方法(post, put, patch)("接口文档的接口地址", {
  接口文档中的参数名: "要携带的值"
}).then(res => {
  // res.data
}).catch(err => {})

axios统一写法

如果我们比较熟悉jquery封装的ajax，我们可以使用下面的写法

axios(url, {
  method: "POST | GET | DELETE | PUT | PATCH",
  data: {
    key: "value"
  },
  // 如果使用的是GET或者DELETE
  params: {
    key: "value"
  }
}).then(res => {

})

axios在VueCli中使用

安装axios模块

npm i --save axios

# 或者 

yarn add axios

最简单的用法

想在哪请求，就在哪引入。（这样很简单，但是不方便后期维护）

一般axios需要在组件中使用

Component.vue

<template>
  <div>
    内容
  </div>
</template>

<script>
import axios from 'axios'
export default {

  mounted () {
    axios.get('url', {params:{}}).then(res => {})
  }
}

</script>

<style></style>

封装函数，方便复用 （建议使用）

src中创建service文件夹

创建service文件夹用于存放所有的请求数据的函数

在service中创建对应数据类型的js文件

创建对应数据类型的js文件，把增删改查相关的函数放在对应的js中

data.js

import axios from 'axios'

// 获取数据 GET /data 目前需要先搞清楚的，如果搞不明白，先学会最简单的用法
export const GET_DATA = (params) => axios.get('url', {params}})

// 创建数据 POST /data
export const POST_DATA = (data) => axios.post('url', data)

// 更新数据 PATCH /data/:id
export const PATCH_DATA = (id, data) => axios.patch(`url/${id}`, data)

// 删除数据
export const DELETE_DATA = (id) => axios.delete(`url/${id}`)