# 一、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 即可

更新于 : 7/8/2024, 10:21:14 AM