T O P

[资源分享]     vue(24)网络请求模块axios使用

  • By - 楼主

  • 2021-07-28 00:01:25
  • 什么是axios

    Axios 是一个基于 promiseHTTP 库,可以用在浏览器和 node.js 中。

    主要的作用:axios主要是用于向后台发起请求的,还有在请求中做更多是可控功能。

    axios有8个特性

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

    安装

    安装十分简单,使用 npm:

    npm install axios
    

     

    案例

    执行 GET 请求

    axios
      .get("请求地址", {
        // 拼接参数写在params中
        params: {
          ID: 12345,
        },
      })
      // 成功后做的事情
      .then(function (response) {
        console.log(response);
      })
      // 失败后做的事情
      .catch(function (error) {
        console.log(error);
      });
    

    执行POST请求

    axios
      .post("请求地址", {
        firstName: "jkc",
        lastName: "123",
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
    

    执行并发请求,当我们想要同时发出2个请求,可以使用axios.all()

    function getUserAccount() {
      return axios.get("/user/12345");
    }
    
    function getUserPermissions() {
      return axios.get("/user/12345/permissions");
    }
    
    axios.all([getUserAccount(), getUserPermissions()]).then((res) => {
      console.log(res);
    });
    

    以上代码我们先定义了2个方法,每个方法都会发送一个请求,最后把2个方法都放在数组中,这样程序就会同时执行2个方法,且最后的结果是在数组中,结果如下:

    上面返回的结果是在数组中,到时候取结果的时候就要用res[0],如果你觉得这样麻烦,如果我们想展开的话,可以使用axios.spread方法

    axios.all([getUserAccount(), getUserPermissions()]).then(
      axios.spread((res1, res2) => {
        console.log(res1);
        console.log(res2);
      })
    );
    

    此时,我们返回的结果就不是一个数组了,会分开来,结果如下:

     

    axios请求配置

    以下是创建请求时可以用的配置选项。只有 url 是必需的。如果没有指定 method,请求将默认使用 get 方法。

    {
      // `url` 是用于请求的服务器 URL
      url: '/user',
    
      // `method` 是创建请求时使用的方法
      method: 'get', // default
    
      // `baseURL` 将自动加在 `url` 前面,除非 `url` 是一个绝对 URL。
      // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
      baseURL: 'https://some-domain.com/api/',
    
      // `headers` 是即将被发送的自定义请求头
      headers: {'X-Requested-With': 'XMLHttpRequest'},
    
      // `params` 是即将与请求一起发送的 URL 参数
      // 必须是一个无格式对象(plain object)或 URLSearchParams 对象
      params: {
        ID: 12345
      },
    
      // `data` 是作为请求主体被发送的数据
      // 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
      data: {
        firstName: 'Fred'
      },
    
      // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
      // 如果请求话费了超过 `timeout` 的时间,请求将被中断
      timeout: 1000,
    
      // `auth` 表示应该使用 HTTP 基础验证,并提供凭据
      // 这将设置一个 `Authorization` 头,覆写掉现有的任意使用 `headers` 设置的自定义 `Authorization`头
      auth: {
        username: 'janedoe',
        password: 's00pers3cret'
      },
    }
    

     

    响应结构

    发送网络请求成功后,返回的响应结构如下:

    {
      // `data` 由服务器提供的响应
      data: {},
    
      // `status` 来自服务器响应的 HTTP 状态码
      status: 200,
    
        // `statusText` 来自服务器响应的 HTTP 状态信息
        statusText: 'OK',
    
      // `headers` 服务器响应的头
      headers: {},
    
      // `config` 是为请求提供的配置信息
      config: {},
      // 'request'
      // `request` is the request that generated this response
      // It is the last ClientRequest instance in node.js (in redirects)
      // and an XMLHttpRequest instance the browser
      request: {}
    }
    

     

    配置默认值

    配置网络请求时,你可以指定将被用在各个请求的配置默认值
     

    全局的 axios 默认值

    axios.defaults.baseURL = 'https://api.example.com';  // 配置默认的baseURL
    axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;  // 配置默认请求头中的Authorization
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';  // 配置默认的post请求方式
    

     

    自定义实例默认值

    // 创建实例时配置默认值
    const instance = axios.create({
      baseURL: 'https://api.example.com'
    });
    
    // 创建实例后更改默认值
    instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;
    

     

    拦截器

    在请求或响应被 thencatch 处理前拦截它们。

    // 2.1.请求拦截器
      instance.interceptors.request.use(
        (config) => {
          console.log(config);
          // 1.比如config中的一些信息不符合服务器的要求
          // 2.比如每次发送网络请求时,都希望在界面中显示一个请求的图标
          // 3.某些网络请求(比如登录(token)),必须携带一些特殊的信息
          return config;
        },
        (error) => {
          console.log(error);
        }
      );
    
      // 2.2.响应拦截
      instance.interceptors.response.use(
        (res) => {
          return res.data;
        },
        (error) => {
          console.log(error);
        }
      );
    

     

    项目中axios完整的封装

    在真实项目开发中,我们会在src文件夹中创建一个utils文件夹,然后在文件夹中创建一个request.js文件,写入如下代码:

    import axios from "axios";
    
    export function request(config) {
      // 1.创建axios的实例
      const instance = axios.create({
        baseURL: "http://xxx.xxx.xx.xx:8000",
        timeout: 5000,
      });
    
      // 2.1.请求拦截器
      instance.interceptors.request.use(
        (config) => {
          console.log(config);
          // 1.比如config中的一些信息不符合服务器的要求
          // 2.比如每次发送网络请求时,都希望在界面中显示一个请求的图标
          // 3.某些网络请求(比如登录(token)),必须携带一些特殊的信息
          return config;
        },
        (error) => {
          console.log(error);
        }
      );
    
      // 2.2.响应拦截
      instance.interceptors.response.use(
        (res) => {
          return res.data;
        },
        (error) => {
          console.log(error);
        }
      );
    
      // 3.发送真正的网络请求
      return instance(config);
    }
    

    最后我们在main.js中给网络请求配置下全局属性即可

    import { request } from "@/utils/request";
    
    Vue.prototype.$request = request;
    

    这样以后,我们在任何目录下,都可以直接使用request网络请求,不需要每次都导入了

    本帖子中包含资源

    您需要 登录 才可以下载,没有帐号?立即注册