一、介绍

基于promise可以用于浏览器和node.js的网络请求库

Axios 是什么?

Axios 是一个基于?promise?网络请求库，作用于node.js?和浏览器中。它是?isomorphic?的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js?http?模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

特性

从浏览器创建?XMLHttpRequests
从 node.js 创建?http?请求
支持?Promise?API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防御XSRF

二、安装

使用 npm:

$ npm install axios

使用 bower:

$ bower install axios

使用 yarn:

$ yarn add axios

使用 jsDelivr CDN:

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

使用 unpkg CDN:

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

三、基本使用

axios(config)

// 发起一个post请求
axios({
  method: '请求方式'
  url: 请求的路径',
  data: {
    请求的数据
  }
})
.then(function (respose){
    响应之后的祥光操作
});

1、请求方式别名

为了方便起见，已经为所有支持的请求方法提供了别名。

axios.request(config)

axios.get(url[, config])

axios.delete(url[, config])

axios.head(url[, config])

axios.options(url[, config])

axios.post(url[, data[, config]])

axios.put(url[, data[, config]])

axios.patch(url[, data[, config]])

注意：在使用别名方法时，?url、method、data?这些属性都不必在配置中指定。

2、响应结构

一个请求的响应包含以下信息。

{
  // `data` 由服务器提供的响应
  data: {},

  // `status` 来自服务器响应的 HTTP 状态码
  status: 200,

  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: 'OK',

  // `headers` 是服务器响应头
  // 所有的 header 名称都是小写，而且可以使用方括号语法访问
  // 例如: `response.headers['content-type']`
  headers: {},

  // `config` 是 `axios` 请求的配置信息
  config: {},

  // `request` 是生成此响应的请求
  // 在node.js中它是最后一个ClientRequest实例 (in redirects)，
  // 在浏览器中则是 XMLHttpRequest 实例
  request: {}
}

当使用?then?时，您将接收如下响应:

axios.get('/user/12345')
  .then(function (response) {
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
  });

四、在Vue中的使用

在main.js中

import { createApp } from 'vue'
import App from './App.vue'
//  导入router
import router from '@/router'
//  导入axios
import axios from "axios";

const app=createApp(App)
//  全局配置axios
app.config.globalProperties.$axios=axios
app.use(router)
app.mount('#app')

?先访问后端自己编写的数据：

 created() {
    //  需要用一个变量保存this
    var that = this
    //  在请求之后this指向放生改变
    this.$axios.get('http://localhost:8081/dept/findAll/0/6')
     //两个参数表示了对应的是分页查询
        .then(function (respose) {
          //console.log(respose)
          // deptForm是data属性保存的一个变量名，用来保存响应的数据
          that.deptForm = respose.data
          console.log(that.deptForm)
         // console.log(respose)
        })
  }