axios初识
前端 原创 Javascript 文章 总结 参考代码 Axios
Axios
发布日期:   2019-08-10
文章字数:   2.2k
阅读时长:   9 分
阅读次数:  

axios相关文档

axios中文文档

1. 简介

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和node.js中。简单来说就是前端最火最简单的一个http请求解决方案。

2. 安装

    npm install vuex --save

3. 功能

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

4.常用的请求方法

方法 用途 优缺点
get 获取数据 get比post更快
get提交的数据最大是2k,而post理论上没有限制。实际上IIS4中最大量为80KB，IIS5中为100KB。
GET在浏览器回退时是无害的，POST会再次提交请求
get比post更不安全，因为参数直接暴露在url中，所以不能用来传递敏感信息
如果第一次请求成功（status=200）,那么没做数据修改再次请求，它会重定向状态（Status Code）会变成304 Not Modified
post 提交数据(如：表单提交、文件上传等) post更安全（不会作为url的一部分，不会被缓存、保存在服务器日志、以及浏览器浏览记录中）
post发送的数据更大（get有url长度限制）
post能发送更多的数据类型（get只能发送ASCII字符）
post比get慢
post用于修改和写入数据，get一般用于搜索排序和筛选之类的操作（淘宝，支付宝的搜索查询都是get提交），目的是资源的获取，读取数据
put 编辑数据/更新数据 将所有数据都提交到服务端（后端）比patch慢
patch 编辑数据/更新数据 只将修改的数据提交到服务端（后端）
delete 删除数据 删除数据但是不删除表的结构

5.并发请求

并发请求：同时进行多个请求，统一处理返回值
方法：axios.all(), axios.spread()
例子：

    // axios.all() 里面是一个数组，用于多个请求
    axios.all([
        axios.gte('/data.json') // 第一个请求
        axios.post('/data2.json') // 第二个请求
    ]).then(
        // axios.spread() 作用是分割all的返回值，与之一一对应
        axios.spread((dataRes,data2Res)=>{ // 上面有几个请求，spread就返回几个参数
            console.log(dataRes,data2Res)
        })
    )

6.axios配置参数

axios实例配置

    axios.create({ // 创建实例
        baseURL: '', // 请求域名（基本地址）如：http://localhost:8080
        timeout: 5000, // 请求超时时长（单位ms）
        url: '', // 请求路径,如：/data.josn 
        method: '', // 请求方法, 如：get, post, put等
        headers: {}, // 设置请求头 如token
        params: {}, // 会将请求参数拼接在url上
        data: {} // 会将请求参数放在请求体里
    })

可以在那些地方配置这些参数

  1. axios全局配置
     axios.defaults.timeot = 5000 //axios.defaults.跟配置，比如axios.defaults.baseURL = 'http://localhost:8080'
  2. axios实例配置
     let newAxios= axios.create() // 如果里面不添加任何参数，则使用axios全局配置
 newAxios.defaults.baseURL = 'http://localhost:8080' // 创建实例后修改配置
  3. axios请求配置
     newAxios.get('/data.josn',{
     timeout: 5000, // 修改请求超时时长（单位ms）
 })
    优先级： axios全局配置 < axios实例配置 < axios请求配置, **axios请求配置最高**

7.实际开发例子

实际开发中全局配置很少用
一般实际开发会这样

    // 首先会先声明个axios实例(有两种请求接口分别为http://localhost:8080和http://localhost:9090)
    let newAxios= axios.create({
        baseURL: 'http://localhost:8080', // 请求域名（基本地址）
        timeout: 1000, // 请求超时时长（单位ms）
    })
    let newAxios2= axios.create({
        baseURL: 'http://localhost:9090', // 请求域名（基本地址）
        timeout: 5000, // 请求超时时长（单位ms）
    })
    // 请求第一个实例,用到的参数：baseURL:'http://localhost:8080'，timeout: 1000，url，method， params
    newAxios.get('/data.josn',{
        params:{}
    }).then((res)=>{
        console.log(res)
    })
    // 请求第二个实例，用到的参数：baseURL:'http://localhost:9090'，timeout:6000，url，method
    newAxios2.get('/data2.josn',{
        timeout: 6000, // 发现有些情况实例里的超时并不能满足所需的，在这可以做单独的修改（其他配置一样）
    }).then((res)=>{
        console.log(res)
    })

8.拦截器

拦截器作用：在请求或响应处理前拦截
拦截器分为：请求拦截器，响应拦截器
请求拦截器语法:axios.interceptors.requse.use(config,err)config：请求前的回调函数，err：请求错误的回调函数

 axios.interceptors.requse.use(config =>{
     // 请求前的回调函数，在发送请求前做些什么
     return config
 },err=>{
     // 请求错误时做些什么（返回到.catch里）
     return Promise.reject(err)
 })

响应拦截器语法:axios.interceptors.response.use(res,err)res：请求成功响应数据做处理，err：响应错误的回调函数

 axios.interceptors.response.use(res =>{
     // 请求成功对响应数据做处理（返回到.then里）
     return res
 },err=>{
     // 响应错误时做些什么
     return Promise.reject(err)
 })

请求错误和响应错误区别
请求错误：请求没有到达后端，比如接口报404等；响应错误：请求到达后端，比如在后端查询某人，没有查到后端会返回给你某些信息（查无此人、查找不到等提示）
取消拦截器语法:let quxiao = axios.interceptors.requse.use(config,err)res：请求成功响应数据做处理，err：响应错误的回调函数

 let quxiao = axios.interceptors.requse.use(config =>{
    config.headers={
        auth:true // 它会默认把它加上
    }
    // 请求前的回调函数，在发送请求前做些什么
    return config
 })
 // 取消
 axios.interceptors.requse.eject(quxiao) // eject与reject类似

例子 登陆状态（token:’’）

    let newAxios= axios.create({})
    newAxios.interceptors.requse.use(config =>{ // 需要登陆，不需要登陆时不用写拦截器
        config.headers.tonke = '' // 实际开发这么写，因为config.headers={}如果它里面只有一个参数会覆盖其他的
        // 请求前的回调函数，在发送请求前做些什么
        return config
    },err=>{
        // 请求错误时做些什么（返回到.catch里）
        return Promise.reject(err)
    })

9.错误处理

请求错误时进行的处理

    axios.interceptors.requse.use(config =>{
        return config
    },err=>{
        return Promise.reject(err)
    })
    axios.interceptors.response.use(res =>{
        // 请求成功对响应数据做处理（返回到.then里）
        return res
    },err=>{
        // 响应错误时做些什么
        return Promise.reject(err)
    })
    // 无论请求错误还是响应错误都会到catch中
    axios.get('/data.josn').then((res)=>{
        console.log(res) // 成功时返回
    }).catch(err=>{
        console.log(err) // 错误时返回
    })
    // 例子 实际开发中，一般都需要统一的错误处理
    // 创建axios实例
    let Service = axios.create({
        baseURL: 'http://localhost:8080', // 需自定义
        // 请求超时时间
        timeout: 5000 // 需自定义
    })
    // 请求拦截器
    Service.interceptors.request.use(
        config => {
            return config
        },err => {
            // 请求错误处理 错误码一般以4开头，常见401,404
            // 可以添加弹窗等错误提示
            return Promise.reject(error)
    })
    // 响应拦截器
    Service.interceptors.response.use(
        res=>{
            return res
        },err => {
            // 响应错误处理 错误码一般以5开头，常见500：系统错误，502：系统重启
            // 可以添加弹窗等错误提示
            return Promise.reject(error)
    })

10.代码封装

下面给出一份封装好的配置文件，更加详细的直接去官方文档查询即可。
(1)工具类封装

// 引入axios
import axios from 'axios';
// 创建axios实例
const httpService = axios.create({
    // url前缀-'https://some-domain.com/api/'
    baseURL: process.env.BASE_API, // 需自定义
    // 请求超时时间
    timeout: 3000 // 需自定义
});
// request拦截器
httpService.interceptors.request.use(
    config => {
        // 根据条件加入token-安全携带
        if (true) { // 需自定义
            // 让每个请求携带token
            config.headers['User-Token'] = '';
        }
        return config;
    }, 
    error => {
        // 请求错误处理
        Promise.reject(error);
    }
)
// respone拦截器
httpService.interceptors.response.use(
    response => {
        // 统一处理状态
        const res = response.data;
        if (res.statuscode != 1) { // 需自定义
            // 返回异常
            return Promise.reject({
                status: res.statuscode,
                message: res.message
            });
        } else {
            return response.data;
        }
    },
    // 处理处理
    error => {
         if (error && error.response) {
            switch (error.response.status) {
                case 400:
                    error.message = '错误请求';
                    break;
                case 401:
                    error.message = '未授权，请重新登录';
                    break;
                case 403:
                    error.message = '拒绝访问';
                    break;
                case 404:
                    error.message = '请求错误,未找到该资源';
                    break;
                case 405:
                    error.message = '请求方法未允许';
                    break;
                case 408:
                    error.message = '请求超时';
                    break;
                case 500:
                    error.message = '服务器端出错';
                    break;
                case 501:
                    error.message = '网络未实现';
                    break;
                case 502:
                    error.message = '网络错误';
                    break;
                case 503:
                    error.message = '服务不可用';
                    break;
                case 504:
                    error.message = '网络超时';
                    break;
                case 505:
                    error.message = 'http版本不支持该请求';
                    break;
                default:
                    error.message = `未知错误${error.response.status}`;
            }
        } else {
            error.message = "连接到服务器失败";
        }
        return Promise.reject(error);
    }
)
/*网络请求部分*/
/*
 *  get请求
 *  url:请求地址
 *  params:参数
 * */
export function get(url, params = {}) {
    return new Promise((resolve, reject) => {
        httpService({
            url: url,
            method: 'get',
            params: params
        }).then(response => {
            resolve(response);
        }).catch(error => {
            reject(error);
        });
    });
}
/*
 *  post请求
 *  url:请求地址
 *  params:参数
 * */
export function post(url, params = {}) {
    return new Promise((resolve, reject) => {
        httpService({
            url: url,
            method: 'post',
            data: params
        }).then(response => {
            resolve(response);
        }).catch(error => {
            reject(error);
        });
    });
}
/*
 *  文件上传
 *  url:请求地址
 *  params:参数
 * */
export function fileUpload(url, params = {}) {
    return new Promise((resolve, reject) => {
        httpService({
            url: url,
            method: 'post',
            data: params,
            headers: { 'Content-Type': 'multipart/form-data' }
        }).then(response => {
            resolve(response);
        }).catch(error => {
            reject(error);
        });
    });
}
export default {
    get,
    post,
    fileUpload
}

（2）使用

// 引入工具类-目录自定义
import fetch from '@/util/fetch'
// 使用
const TMPURL = ''; // url地址
const params = {}; // 参数
fetch.post(TMPURL + '/login/login', params);
赏
 上一篇
JavaScript- 数组对象根据相同对象分组 JavaScript- 数组对象根据相同对象分组
JavaScript数组对象根据相同对象分组
2019-09-11 JavaScript
前端 原创 Javascript 文章 总结 参考代码
下一篇 
Vuex(六) module-模块组 Vuex(六) module-模块组
当应用非常复杂，状态非常多的时候，需要将store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块，从上至下进行同样方式的分割。
2019-08-08 Vuex
前端 原创 Javascript 文章 总结 参考代码 vuex
  目录