axios-易用、简洁且高效的http库

2019-12-30 本文已影响0人橙赎

一、什么是axios

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 库，简单来说是可以发送GET和POST请求。它有以下优点：

从浏览器中创建 XMLHttpRequest
从 node.js 发出 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换 JSON 数据
客户端支持防止XSFR攻击

axios中文文档：http://www.axios-js.com/

二、axios的安装使用

1.安装：

npm install axios

2.导入：

import axios from 'axios';

3.axios的简单使用

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>axios</title>
</head>

<body>
    <h2>axios使用</h2>
    <div id="message"></div>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        //dom获取节点操作
        const axiosElement = document.getElementById("message");
        //定义一个axios实例
        const axiosconfig = axios.create({
            //url地址，baseURL为固定写法
            baseURL: "http://www.xxx.com",
            // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
            // 如果请求话费了超过 `timeout` 的时间，请求将被中断
            timeout: 2000
        });
        //请求拦截
        axiosconfig.interceptors.request.use(config => {
            console.log(`拦截>>>>>>>>>>>>`);
            //发送请求之前做的操作
            return config;
        }, err => {
            //请求错误的操作
            return Promise.reject(err);
        });
        //响应拦截
        axiosconfig.interceptors.response.use(response => {
            //对响应数据的操作
            console.log(`拦截成功>>>>>>>>>`);
        }, err => {
            //对响应错误的操作
            return Promise.reject(err);
        })
        //执行操作(GET请求)
        axiosconfig({
            //路径
            url: "/api/find",
            //请求数据的方法
            method: "GET",
            //params是即将与请求一起发送的 URL 参数
            params: { id: 1 }
        }).then(res => {
            //对服务器响应的数据的处理
            axiosElement.innerHTML = JSON.stringify(res.data);
        }).catch(err => {
            //数据获取失败的处理
            console.log(err);
        })
    </script>
</body>

</html>

4.对axios的封装(案例)

import axios from 'axios';
//自定义实例默认值
const axiosApi = axios.create({
    baseURL: 'http://www.xxx.com:port/path',
    timeout: 2000
});
//在请求或响应被 then 或 catch 处理前拦截它们
/**
 * 请求拦截
 */
axiosApi.interceptors.request.use(config => {
    return config;
}, err => {
    return Promise.reject(err);
});

/**
 * 响应拦截
 */
axiosApi.interceptors.response.use(response => {
    return response;
}, err => {
    return Promise.reject(err);
});
export default axiosApi;

import axiosApi from './base.js';
/**
 * 用户添加接口
 * @param {*} username 
 * @param {*} psw 
 */
export const RequestAdduser = (username, psw) => {
    return axiosApi({
        url: '/api/add',
        method: 'POST',
        data: { username, psw }
    })
}
/**
 * 用户列表接口
 */
export const RequesUserList = () => {
    return axiosApi({
        url: '/api/list',
        method: 'GET',
    })
}

axios-易用、简洁且高效的http库

一、什么是axios

二、axios的安装使用

猜你喜欢

热点阅读