Axios请求（上） | 任先生的笔记库

TIP

Axios 官网 (opens new window)

# 一、Axios

# 1、简介

Axios (opens new window) 是一个基于 promise 网络请求库，作用于 node.js 和浏览器中。

在服务端它使用原生 node.js http 模块,
而在客户端 (浏览端) 则使用 XMLHttpRequests。

安装：

https://www.axios-http.cn/docs/intro

# 2、axios 模板

定义时的常用请求配置（config (opens new window)）：

axios.all 使用

Promise.all

axios
  .all([
    axios.get('https://jsonplaceholder.typicode.com/posts/6'),
    axios.get('https://jsonplaceholder.typicode.com/posts/15')
  ])
  .then((res) => {
    console.log(res)
  })

axios 实例中	axios 请求中	请求拦截
baseURL	method（支持几乎所有的请求类型，甚至可以通过 axios.all 发生多个请求）	headers（值为对象）
timeout （默认值为 0，即永不超时）	url	responseType（默认值为 'json'）
	data / params（值为对象）

// 默认为axios.get
axios(config)
  .then((res) => {
    // handle response
  })
  .catch((error) => {
    // handle error
  })

promise 响应对象常用属性（response (opens new window)）：

axios 响应中	响应拦截	不常用
data 👀	headers（值为对象）	config
	status（HTTP 状态码）	request
	statusText（HTTP 状态信息）

# 3、请求示例

get 请求

<body>
  <script src="./lib/axios.min.js"></script>
  <script>
    function axios_get() {
      axios({
        method: 'GET',
        url: 'http://jsonplaceholder.typicode.com/posts',

        //get请求url中的查询参数 —— ✨params
        params: { id: 1 }
      }).then(res) => {
        console.log(res)
      }

    }

    axios_get()
  </script>
</body>

post 请求

<body>
  <script src="./lib/axios.min.js"></script>
  <script>
    function axiso_post() {
      axios({
        method: 'POST',
        url: 'http://jsonplaceholder.typicode.com/posts',

        //post请求：请求体参数 —— ✨data
        data: {
          title: 'foo',
          body: 'bar',
          userId: 1
        }
      }).then((res) => {
        console.log(res)
      })
    }

    axiso_post()
  </script>
</body>

# 二、Axios 使用示例

Promise 与 axios

# 1、async/await 版

如果调用某个方法的返回值是 Promise 实例，则前面可以添加 await；并且使用 await 时要确保它在 async 修饰的方法中

get 请求

<body>
  <script src="./lib/axios.min.js"></script>
  <script>
    async function axios_get() {
      try {
        const { data: res } = await axios({
          method: 'GET',
          url: 'http://jsonplaceholder.typicode.com/posts',

          //get请求url中的查询参数 —— ✨params
          params: { id: 1 }
        })

        console.log(res)
      } catch (err) {
        console.log(err)
      }
    }

    axios_get()
  </script>
</body>

post 请求

<body>
  <script src="./lib/axios.min.js"></script>
  <script>
    async function axiso_post() {
      try {
        const { data: res } = await axios({
          method: 'POST',
          url: 'http://jsonplaceholder.typicode.com/posts',

          //post请求：请求体参数 —— ✨data
          data: {
            title: 'foo',
            body: 'bar',
            userId: 1
          }
        })

        console.log(res)
      } catch (err) {
        console.log(err)
      }
    }

    axiso_post()
  </script>
</body>

# 2、Promise 版

精简版

axios.post(url[, params[, config]])
axios.post(url[, data[, config]])
  .then((res) => {
    // handle response
  })
  .catch((error) => {
    // handle error
  })

提示

在精简版 axios 使用中，我们还可以进一步的进行简化：

get 请求（直接精简为： ?id=1）

{
  params: {
    id: 1
  }
}

post 请求（直接精简为：{title: 'foo',body: 'bar',userId: 1}）

{
  "data": {
    "title": "foo",
    "body": "bar",
    "userId": 1
  }
}

get 请求

<body>
  <script src="./lib/axios.min.js"></script>
  <script>
    function axios_get() {
      axios.get('http://jsonplaceholder.typicode.com/posts?id=1').then((res) => {
        console.log(res)
      })
    }

    axios_get()
  </script>
</body>

最简化的使用方式，如下：

post 请求

<body>
  <script src="./lib/axios.min.js"></script>
  <script>
    function axiso_post() {
      axios
        .post('http://jsonplaceholder.typicode.com/posts', {
          title: 'foo',
          body: 'bar',
          userId: 1
        })
        .then((res) => {
          console.log(res)
        })
    }

    axiso_post()
  </script>
</body>

# 三、Vue 与 axios

# 1、vue 单页面

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<body>
  <div id="app">
    <span>{{ username }}</span>
    <button @click="btnFn">获取author</button>
  </div>

  <script src="./lib/vue-2.6.14.js"></script>
  <script src="./lib/axios.min.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        username: '未知'
      },
      methods: {
        btnFn: function () {
          axios.get('http://jsonplaceholder.typicode.com/posts?id=1').then((res) => {
            this.username = res.data.author
          })
        }
      }
    })
  </script>
</body>

# 2、vue 开发

npm install axios

<template>
  <div class="demo-container">
    <span>{{ username }}</span>
    <button @click="btnFn">获取author</button>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'Demo'
  data() {
    return {
      username: '未知'
    }
  },
  methods: {
    btnFn: function () {
      axios.get('http://jsonplaceholder.typicode.com/posts?id=1').then((res) => {
        this.username = res.data.author
      })
    }
  }
}
</script>

当然如果不想每次使用 axios 都要在页面import axios from 'axios'，那么可以在 main.js 文件中将它挂载在 Vue 原型上，成为共享成员。

main.js

import axios from 'axios'

// Vue.prototype.axios = axios
Vue.prototype.$http = axios

经过上面的操作，后面组件使用 axios 时，就不用单独导入了，直接使用 this.$http.xxx 即可

← jQuery请求 Axios请求（下） →