前端学习-axios与element-ui

最新推荐文章于 2023-11-26 22:01:10 发布

a听闻

最新推荐文章于 2023-11-26 22:01:10 发布

阅读量499

点赞数

分类专栏： Web前端文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/LuKeliyy/article/details/113462715

版权

Web前端专栏收录该内容

16 篇文章 2 订阅

订阅专栏

1. axios（熟悉）

axios是基于promise 的 HTTP 库，可以用在浏览器和 node.js 中

API文档：https://www.kancloud.cn/yunye/axios/234845

下载地址：https://www.bootcdn.cn/axios/

1.1基本用法axios(config)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>axios获取登录验证码</title>
</head>
<body>
<span></span>
<script type="text/javascript" src="./lib/axios-0.21.0/axios.min.js"></script>
<script type="text/javascript">
    window.onload = function () {
        axios({
            method: 'get',
            url: 'http://www.xxxxxx',
        }).then(response => {
            let data = response.data.data;
            document.querySelector('span').innerText = `${data.code}`;
        }).catch(error => {
            console.log(error);
        })
    }
</script>
</body>
</html>

1.2 可配置的详细列表

window.onload = function () {
    axios({
        /***** 常用的配置 *****/
        //请求的方式，默认值为get
        method: 'post',
        //请求的服务器地址，必填
        url: 'user/login',
        //自动添加在url前面，除非url是一个绝对URL
        baseURL: 'http://www.xxxxxx/',
        // 作为请求主体被发送的数据
        // 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
        // 在没有设置 `transformRequest` 时，必须是以下类型之一：
        // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
        // - 浏览器专属：FormData, File, Blob
        // - Node 专属： Stream
        data: {
            account: 'admin',
            code: '2BCO',
            codeUid: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9',
            password: '123456'
        },
        // 自定义请求头(post、put、patch默认存在Content-Type:application/x-www-form-urlencoded)
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        // 指定请求超时的毫秒数(0 表示无超时时间)
        // 如果请求花费了超过 `timeout` 的时间，请求将被中断
        timeout: 1000,
        // 表示跨域请求时是否需要使用凭证（默认值为false）
        withCredentials: false,
        // 服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
        responseType: 'json', // 默认值为json

        /***** 不常用的配置 *****/
        // 允许在向服务器发送前，修改请求数据
        // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
        // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
        transformRequest: [function (data) {
            // 对 data 进行任意转换处理
            console.log(data);
            return data;
        }],
        // 在传递给 then/catch 前，允许修改响应数据
        transformResponse: [function (data) {
            // 对 data 进行任意转换处理
            console.log(data);
            return data;
        }],
        // 用作 xsrf token 的值的cookie的名称
        xsrfCookieName: 'XSRF-TOKEN', // default
        // 承载 xsrf token 的值的 HTTP 头的名称
        xsrfHeaderName: 'X-XSRF-TOKEN', // 默认的
        // 允许为上传处理进度事件
        onUploadProgress: function (progressEvent) {
            // 对原生进度事件的处理
        },
        // 允许为下载处理进度事件
        onDownloadProgress: function (progressEvent) {
            // 对原生进度事件的处理
        },
        // 定义允许的响应内容的最大尺寸
        maxContentLength: 2000,
    }).then(response => {
        console.log(response)
    }).catch(error => {
        console.log(error);
    })
}

1.3 快捷请求别名

同样采用RESTful风格，为方便起见，为所有支持的请求方法提供了别名

axios.get(url[, config])

axios.delete(url[, config])

axios.post(url[, data[, config]])

axios.put(url[, data[, config]])

1.4 全局配置

可以使用defaults，将前面的配置，设置为默认值

axios.defaults.baseURL = 'http://www.xxx:8881/';
axios.defaults.timeout = 1000;

1.5 拦截器

在请求或响应被 then 或 catch 处理前拦截它们

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});

2. element-ui 提供的组件（熟悉）

官方地址： https://element.eleme.cn/#/zh-CN/component/installation

字体图标下载地址：https://unpkg.com/browse/element-ui@2.15.0/lib/theme-chalk/fonts/

a听闻

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习-axios与element-ui

1. axios（熟悉）axios是基于promise 的 HTTP 库，可以用在浏览器和 node.js 中API文档：https://www.kancloud.cn/yunye/axios/234845下载地址：https://www.bootcdn.cn/axios/1.1基本用法axios(config)<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"&gt
复制链接

扫一扫