前端の axios

文章目录

1.axiox 的多种请求方式

axios（config）
axios.request（config）
axios.get（url[,config]）
axios.delete（url.[config]）
axios.head（url[.config]）
axios.post（url[,date[.config]]）
axios.put（url[,data[,config]]）
axios.patch（url[,data[,config]]）

2.基本使用

2.1安装框架：

cnpm install axios --save

2.2 一般用来做为测试的网站：

一个经常拿来做测试的网站：http://httpbin.org/

视频中，老师给出的框架： http://123.207.32.32:8000/home/multidata

3.3代码：

<!--  -->
<template>
  <div>
    <h2>我是about，呵呵</h2>
    <p>我是内容，呵呵</p>
  </div>
</template>

<script>
export default {
    
    
  name: "About",
  data() {
    
    
    return {
    
    };
  },
};

// 引入 axios
import axios from "axios";

axios({
    
    
  //  此时应该传入的是一个对象,因为只有对象，才能传入更多的数据。
  url: "http://123.207.32.32:8000/home/multidata",
  method:'get' //指定使用 get 请求
}).then(res=>{
    
    
  console.log(res);
})
<script>

返回的结果里面，一般都是返回在 data 里面，其他的部分是vue框架给自动添加的。

在这里插入图片描述

3.4 post 请求

// 发送 POST 请求
axios({
    
    
  method: 'post',
  url: '/user/12345',
  data: {
    
    
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

3.发送并发请求

发送两个请求，当两个请求都发送完了以后，再进行下一步的操作。

// 引入 axios
import axios from "axios";
// 如果是两个请求的话，可以使用两个请求来进行
axios.all([axios(),axios()]).then(results=>{
    
     
})

</script>

直接在axios（）后边的小括号里，加个 { } ，开始写就行了，返回的会是一个数组，把数组里里面的内容，拿出来自己的写就行了。

<template>
  <div>
    <h2>我是about，呵呵</h2>
    <p>我是内容，呵呵</p>
  </div>
</template>

<script>
export default {
    
    
  name: "About",
  data() {
    
    
    return {
    
    };
  },
};

// 引入 axios
import axios from "axios";
// 如果是两个请求的话，可以使用两个请求来进行
axios
  .all([
    axios({
    
    
      url: "http://httpbin.org/get",
    }),
    axios({
    
    
      url: "http://httpbin.org/get",
    }),
  ])
  .then((results) => {
    
    
    console.log(results[0]);
    console.log(results[1]);
  });
</script>

<style  scoped>
</style>

4.全局配置

事实上，开发中，可能很多的参数都是固定的，这个时候，我们可以进行一些抽取，也可以利用 axios 的全局配置。

axios.defaults 直接在后边加就行了，当然，其他还有更多的全局配置信息，详细信息，请查看官网。

// 引入 axios
import axios from "axios";

axios.defaults.baseURL="http://httpbin.org/get"  // 用 defaults 后边跟的就是 全局配置
axios.defaults.timeout=5000
axios
  .all([
    axios({
    
    
      url: "",
    }),
    axios({
    
    
      url: "",
    }),
  ])
  .then((results) => {
    
    
    console.log(results[0]);
    console.log(results[1]);
  });
</script>

5.Vue 的实例和模块封装

之前的创建方法，都是使用全局的一个实例，那么在进行配置的时候，一些个默认配置，都会在每一次的 axios 的调用过程中启用，所以为了为每一个 axios ，设置单独的设置默认配置，就需要创建实例。

<script>
// 声明一个实例
import axios from "axios";
const instance1 = axios.create({
    
    
  baseURL: "http://httpbin.org/patch",
  timeout: 5000,
});

// 对实例进配置
instance1({
    
    
  url: "",
}).then((res) => console.log(res));

// 对实例进行配置
instance1({
    
    
  url: "/home/data",
  method: "get",
  data: {
    
    
    firstName: "Fred",
    lastName: "Flintstone",
  },
});

// 将配置好的实例，放到 插件的实例里面，在上面进行显示
export default {
    
    
  name: "",
  data() {
    
    
    return {
    
    
      result: "",
    };
  },
  created() {
    
    
    instance1({
    
    
      url: "/home/data",
      method: "get",
      data: {
    
    
        firstName: "Fred",
        lastName: "Flintstone",
      },
    }).then((res) => {
    
    
      console.log(res);
      this.result = res;
    });
  },
};
</script>

6. vue 的模块封装

模块疯转的意义就在于，当有一天，axios 模块不再维护了，那么当时所有用到 axios 的地方都要进行修改，所以应对于这种情况的通常做法，最常用的方法，就是自己进行模块封装，把 axios 单独的封装起来，如下图所示：

在这里插入图片描述

6.1先看一个简单解决方案：

先建立一个 network 文件夹，然后将 request.js 文件写到这个文件夹里面

在这里插入图片描述
request 文件夹里面的内容如下：

import axios from 'axios'

// 先声明一个方法
export function request(config, success, failure) {
    
    
  const instance = axios.create({
    
     // 创建一个 axios 实例
    baseURL: 'http://123.207.32.32:8000',
    timeout: 5000
  })

  // 把 config 传进实例里面
  // 发送真正的网路请求
  instance(config)
    .then(res => {
    
     // 正常情况下调用
      //console.log(res);
      success(res);
    })
    .catch(err => {
    
     // 出现异常的时候调用
      //console.log(err);
      failure(err);
    })
  // 在 homeNew 里面调用这个方法
}

在引用的地方的代码：

// 调用封装好的 request 模块
import {
    
    request} from '../../src/network/request'  // 加 {} 的这种方法，是直接把原文件里面对应的方法拿出来了
request({
    
    
  url:'/home/multidata'
},res=>{
    
    
  console.log(res)
},err=>{
    
    
  console.log(err)
}

6.2 再看一个更简单的解决方案

request 文件里面的内容怎么写？

//使用第二种方法进行封装
export function request(config) {
    
    
  const instance3 = axios.create({
    
    
    baseURL: 'http://123.207.32.32:8000',
    timeout: 5000
  })
  return instance3(config)
}

在插件里面调用：

// 用第二种方式调用我封装好的 axiso 请求
import {
    
    request} from '../../src/network/request'

request({
    
    
  url:'/home/multidata'
}).then(res=>{
    
    
  console.log(res);
}).catch(err=>{
    
    
  console.log(err);
})

7.使用拦截器

对于拦截器，可以在我们每次发送请求或者得到相应后，对获得的数据进行一步的处理，然后把处理后的数据再返回到request 请求里面。

axios 的拦截器默认有四种拦截方式

响应成功
响应失败
请求成功
请求失败

在 request.js 文件里面，代码如下：

export function request(config) {
    
    
  const instance3 = axios.create({
    
    
    baseURL: 'http://123.207.32.32:8000',
    timeout: 5000
  })

  // axios的拦截器
  // 对 实例3 进行拦截
  instance3.interceptors.request.use(config => // 请求时候进行拦截,有两个参数，一个是 请求成功，一个是失败
    {
    
    
      console.log(config)
      // 1.比如 config的内容不满足服务器的请求
      // 2.比如在发送网络请求的时候，都会在界面中显示一个请求的图表
      // 3.某些网络请求（比如登录 token），必须携带一些特殊的信息

      return config // 在这个地方的config 一点要返回出去
    },
    err => {
    
    
      console.log(err)
    }
  );
  instance3.interceptors.response.use( // 响应的时候进行拦截
    res => {
    
    
      console.log(res)
      return res.data  // 返回data就够了，其他的都用不到
    },
    err => {
    
    
      console.log(err)
 });

前端 の axios