Axios API

最新推荐文章于 2024-09-04 09:35:00 发布

跳跳呦�

最新推荐文章于 2024-09-04 09:35:00 发布

阅读量348

点赞数

分类专栏： Vue 文章标签： axios fetch ajax api

本文链接：https://blog.csdn.net/weixin_44010187/article/details/96875410

版权

Vue 专栏收录该内容

28 篇文章 2 订阅

订阅专栏

最近刚开始接触vue项目，遇到了axios,不可避免的有点迷茫，于是查资料对其有所总结。在查它的时候又看到了它和jquery的ajax和fetch.在这里简单的对三者进行对比并详细说明一下我是怎样通过Axios API 调取接口的。

三者对比参考自https://blog.csdn.net/twodogya/article/details/80223508
Ajax

$.ajax({
   type: 'POST',
   url: url,
   data: data,
   dataType: dataType,
   success: function () {},
   error: function () {}
});

优缺点：

本身是针对MVC的编程,不符合现在前端MVVM的浪潮
基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案
JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务）

fetch


try {
  let response = await fetch(url);
  let data = response.json();
  console.log(data);
} catch(e) {
  console.log("Oops, error", e);
}

优缺点：

符合关注分离，没有将输入、输出和用事件来跟踪的状态混杂在一个对象里
更好更方便的写法
更加底层，提供的API丰富（request, response）
脱离了XHR，是ES规范里新的实现方式
fetchtch只对网络请求报错，对400，500都当做成功的请求，需要封装去处理
fetch默认不会带cookie，需要添加配置项
fetch不支持abort，不支持超时控制，使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行，造成了量的浪费
fetch没有办法原生监测请求的进度，而XHR可以

axios
特性：
9. 从浏览器中创建 XMLHttpRequests
10. 从 node.js 创建 http 请求
11. 支持 Promise API
12. 拦截请求和响应
13. 转换请求数据和响应数据
14. 取消请求
15. 自动转换 JSON 数据
16. 客户端支持防御 XSRF

简单用法：
get请求：

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 可选地，上面的请求可以这样做
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

post请求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

执行并发请求

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  }));

加下来便是结合官方文档我自己实现的axios api 调用了。
新建三个文件
1. axios的实例封装，此文件暂时命名为model.js

import axios from 'axios';
import store from '../store';
// 创建axios实例
const service = axios.create({
  // baseURL: process.env.BASE_API, // api的base_url
  timeout: 5000 // 请求超时时间
});
// request拦截器
service.interceptors.request.use(config => {
  return config;
}, error => {
  console.log(error); // for debug
  Promise.reject(error);
})
// respone拦截器
service.interceptors.response.use(
  response => {
    /**
     * 通过response自定义code来标示请求状态，当code返回如下情况为权限有问题，登出并返回到登录页
     * 如通过xmlhttprequest 状态码标识 逻辑可写在下面error中
     */
    const res = response.data;
    if (response.status === 401 || res.status === 40101) {｝.then(() => {
			//要进行的操作
        });
      })
      return Promise.reject('error');
    }
    if (res.status === 40301) {
      //要进行的操作
      return Promise.reject('error');
    }
    if (res.status === 500) {
      Message({
        message: res.message,
        type: 'warning'
      });
      return Promise.reject('error');
    }
    if (response.status !== 200 && res.status !== 200) {
      Message({
        message: res.message,
        type: 'error',
        duration: 5 * 1000
      });
    } else {
      if (response.data.hasOwnProperty('header')) {
        if (response.data.header.statusCode === '000000') {
          return response.data.body
        } else {
          Message({
            message: response.data.header.message,
            type: 'warning'
          });
          return Promise.reject('error');
        }
      }
      return response.data;
    }
  },
  error => {
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    });
    return Promise.reject(error);
  }
);
export default service;

接下来具体解析里面的代码：
调用axios， store个人有需要时调用

import axios from 'axios';
import store from '../store';

创建axios实例

// 创建axios实例
const service = axios.create({
  // baseURL: process.env.BASE_API, // api的base_url
  timeout: 5000 // 请求超时时间
});

使用request拦截器对axios请求配置做统一处理

// request拦截器
service.interceptors.request.use(config => {
  return config;
}, error => {
  console.log(error); // for debug
  Promise.reject(error);
})

使用response拦截器对axios请求配置做统一处理

// respone拦截器
service.interceptors.response.use(
  response => {
    /**
     * 通过response自定义code来标示请求状态，当code返回如下情况为权限有问题，登出并返回到登录页
     * 如通过xmlhttprequest 状态码标识 逻辑可写在下面error中
     */
    const res = response.data;
    if (response.status === 401 || res.status === 40101) {｝.then(() => {
			//要进行的操作
        });
      })
      return Promise.reject('error');
    }
    if (res.status === 40301) {
      //要进行的操作
      return Promise.reject('error');
    }
    if (res.status === 500) {
      Message({
        message: res.message,
        type: 'warning'
      });
      return Promise.reject('error');
    }
    if (response.status !== 200 && res.status !== 200) {
      Message({
        message: res.message,
        type: 'error',
        duration: 5 * 1000
      });
    } else {
      if (response.data.hasOwnProperty('header')) {
        if (response.data.header.statusCode === '000000') {
          return response.data.body
        } else {
          Message({
            message: response.data.header.message,
            type: 'warning'
          });
          return Promise.reject('error');
        }
      }
      return response.data;
    }
  },
  error => {
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    });
    return Promise.reject(error);
  }
);

将我们的axios实例导出以便调用接口

export default service;

2. axios API 接口,此文件暂且命名为axiosapi.js

import axiosapi from 'api/model';
//   启用状态
export function updateStatus(params) {
  return axiosapi ({
    url: '/api/campaign/marketActivity/updateStatus',
    method: 'post',
    params
  });
}
//  获取活动详情
export function getDetail(id) {
  return axiosapi ({
    url: '/api/campaign/marketActivity/getDetail/' + id,
    method: 'get'
  });
}

调用model.js文件，配置接口，接口中调用axios实例。上面两种分别是get请求和post请求的方式之一，在这里return axiosapi （config）括号中的内容便相当于config。

3. 具体组件调用，暂时命名为index.vue
组件中引入axiosapi.js文件

import {
  updateStatus
} from "api/axiosapi";

具体应用中调用该接口

methods: {
    // 更新
    handleStart(data) {
      let params = {
        id: data.id,
        name: data.name
      };
      updateStatus(params).then(res => {
        //res  返参
        this.getList();
        if (res.message == "更改成功") {
          this.$notify({
            title: "成功",
            message: "更改成功",
            type: "success"
          });
        }
      });
    }
  }

在then后面便可以获取到返参，进行下一步操作了。

写下来防止自己忘记，也供大家参考。
引用：https://blog.csdn.net/qq_38145702/article/details/81558816