Axios学习一

最新推荐文章于 2024-06-27 19:13:37 发布
最新推荐文章于 2024-06-27 19:13:37 发布
阅读量634 收藏 1
点赞数 1
分类专栏： Axios ES6 文章标签： AxIos
ES6 同时被 2 个专栏收录
2 篇文章 0 订阅
订阅专栏
Axios
1 篇文章 0 订阅
订阅专栏

一、基本使用

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。Axios就是一个能够发起HTTP请求的js库。官网地址
由于Axios是基于ES6的Promise的，所以axios必须在支持ES6 Promise的环境下运行。
1.get请求示例

采用<script>引入axios库
 <script type="text/javascript" src="../lib/axios.js"></script>
 
axios.get("http://localhost:8888/empno")
        .then(function (response) {
            console.info(response);
        })
        .catch(function (error) {
            console.info(error);
        })
        .finally(function () {
            console.info("不管前面执行的如何，这里都会执行到!");
        });

运行结果如下：
在这里插入图片描述
可以看到 ，响应的结果包含以下几个部分：

{
   config:{},
   //data就是服务端响应返回的数据
   data:{},
   //服务端所有的响应头信息
   headers:{},
   request:...
   //来自于服务端的HTTP响应状态码
   status:200,
   statusText:""
}

get请求参数也可以写成这样

    axios.get("http://localhost:8888/empNo", {
        params: {
            empno: '7369'
        }
    })
        .then(function (response) {
            console.info(response.data);
        })
        .catch(function (error) {
            console.info(error);
        })
        .finally(function () {
            console.info("不管前面执行的如何，这里都会执行到!");
        });
        //结果为：
       {empno: 7369, ename: "SMITH", job: "CLERK", mgr: 7902, hiredate: "1980-12-17 00:00:00", …}
       不管前面执行的如何，这里都会执行到!

2.post请求示例

    axios.post("http://localhost:8888/", {
        empno: '0591',
        ename: 'Tom',
        job: '程序员'
    })
        .then(function (response) {
            console.info(response.data);
        })
        .catch(function (error) {
            console.info(error);
        })
        .finally(function () {
            console.info("不管前面执行的如何，这里都会执行到!");
        });
    /**
     * AJAX Post请求中常用的两种传参数的形式分别是Form Data 和 Request Payload
     * Request Payload 请求头为: Content-Type: application/json;charset=UTF-8，并且请求正文是一个 json 格式的字符串
     * Form Data  请求头部为: Content-Type: application/x-www-form-urlencoded，并且请求正文是类似 get 请求 url 的请求参数
     * 其他情况如使用原生AJAX的POST请求如果不指定请求头Request Header，默认请求头尾:Content-Type:text/plain;charset=UTF-8，参数出现在Request payload块。
     *
     * 后端采用 Spring MVC框架开发的话
     * 对于 Request Payload 请求， 方法必须加 @RequestBody 注解才能将请求正文解析到对应的 bean 中，且只能通过 request.getReader() 来获取请求正文内容
     * 对于 Form Data 请求，无需任何注解，Spring MVC会自动使用 MessageConverter(消息转换器) 将请求参数解析到对应的 bean，且通过 request.getParameter(...) 能获取请求参数
     * axios的Post请求默认是Request Payload 请求
     */

后端代码如下：

 /**
     * 保存员工信息
     *
     * @param request
     * @return
     */
    @PostMapping("/")
    public Map<String, Object> saveEmp(HttpServletRequest request, @RequestBody Emp emp) {
        Map<String, Object> result = new HashMap<>(8);
        empService.saveEmp(emp);
        result.put("status", "0");
        result.put("message", "保存成功");
        return result;
    }

执行结果如下:
在这里插入图片描述
默认情况下，axios将JavaScript对象序列化为JSON。如果要以application/x-www-form-urlencoded格式发送数据，可以使用以下几个方法(直接设置请求头的Content-Type无效)：
方法一:

    axios({
        method: 'post',
        url: 'http://localhost:8888/',
        data: "empno=0593&ename=kaili&job=Teacher"
    }).then(function (response) {
        console.info(response.data);
    })

这样请求头 为：Content-Type: application/x-www-form-urlencoded 如下图所示：
在这里插入图片描述
方法二：在特定浏览器中，你可以使用URLSearchParams API


    var searchParam = new URLSearchParams();
    searchParam.append("empno","0595");
    searchParam.append("ename","LILi");
    searchParam.append("job","程序媛");
    
    axios({
        method: 'post',
        url: 'http://localhost:8888/emp',
        data: searchParam
    }).then(function (response) {
        console.info(response.data);
    })

方法三:使用qs库对数据进行序列化
方法四：在NodeJs环境中 你可以使用querystring模块
后端代码如下：

   @PostMapping("/emp")
    public Map<String, Object> saveEmp(HttpServletRequest request) {

        String empno = request.getParameter("empno");
        String ename = request.getParameter("ename");
        String job = request.getParameter("job");


        Emp emp = new Emp();
        emp.setJob(job);
        emp.setEname(ename);
        emp.setEmpno(Integer.valueOf(empno));

        empService.saveEmp(emp);

        Map<String, Object> result = new HashMap<>(8);
        result.put("status", "0");
        result.put("message", "保存成功");
        return result;
    }

二、axios常用API

1.可以通过将相关配置参数传递给axios来发出请求
基本调用方式为: axios(config),例如发送一个Post请求如下：

axios({
        method: 'post',
        url: 'http://localhost:8888/',
        data: {
            empno: '0592',
            ename: 'Cat',
            job: '测试人员'
        }
    }).then(function (response) {
        console.info(response.data);
    })
        .catch(function (error) {
            console.info(error);
        })
        .finally(function () {
            console.info("不管前面执行的如何，这里都会执行到!");
        });

默认发送Get请求,如下:

    axios("http://localhost:8888/empno");

2.为了方便起见，axios为所有受支持的HTTP请求方法提供了别名。

  1. axios.request(config)
  2. axios.get(url[, config])
  3. axios.delete(url[, config])
  4. axios.head(url[, config])
  5. axios.options(url[, config])
  6. axios.post(url[, data[, config]])
  7. axios.put(url[, data[, config]])
  8. axios.patch(url[, data[, config]])

三、请求配置属性

这些是用于发出请求的可用配置选项。只需要url。如果没有指定方法，请求将默认为GET

{
 url:'xxx',
 //指定 在发出请求时使用的请求方法
  method: 'get', // 默认get请求
  //可以方便地为axios的实例设置' baseURL '来传递相对url
  baseURL: 'https://some-domain.com/api/',
  //“transformRequest”允许在请求数据发送到服务器之前对其进行更改
  //这只适用于“PUT”、“POST”、“PATCH”和“DELETE”请求方法
  //数组中的最后一个函数必须返回一个字符串或Buffer的实例ArrayBuffer，FormData或流
  //您也可以修改headers对象。
  transformRequest: [function (data, headers) {
    // Do whatever you want to transform the data

    return data;
  }],
  //“transformResponse”允许更改之前的响应数据
  //它将被传递给then/catch绑定的函数
 transformResponse: [function (data) {
    // Do whatever you want to transform the data

    return data;
  }],
  // “headers”是要发送的自定义请求头
   headers: {'X-Requested-With': 'XMLHttpRequest'},
   //“params”是与请求一起发送的URL参数
   //必须是普通对象或者是URLSearchParams对象
    params: {
    ID: 12345
  },
   paramsSerializer: function (params) {
    return Qs.stringify(params, {arrayFormat: 'brackets'})
  },

//“data”是作为请求体发送的数据
//只适用于“PUT”、“POST”和“PATCH”请求方法
//当没有设置“transformRequest”时，必须是以下类型之一:
//- string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
//浏览器中仅为：FormData, File, Blob对象
//NodeJs环境中仅为：Stream, Buffer对象
 data: {
    firstName: 'Fred'
  },
  //“timeout”指定请求超时之前的毫秒数。
  //如果请求花费的时间超过“tiemout”值，请求将被中止。
  timeout: 1000, //默认值为' 0 '(没有超时)
  //指示是否跨站点访问控制请求
  //应该使用凭证
  withCredentials: false, // default,
  adapter: function (config) {
    /* ... */
  },
  auth: {
    username: 'janedoe',
    password: 's00pers3cret'
  },
  //'表示服务器将响应的数据类型
  //可选值为：'arraybuffer', 'document', 'json', 'text', 'stream'
   responseType: 'json', // default
   //指示用于解码响应的编码
 responseEncoding: 'utf8', // default
 xsrfCookieName: 'XSRF-TOKEN', // default
  xsrfHeaderName: 'X-XSRF-TOKEN', // default
  //允许处理上传的进度事件
 onUploadProgress: function (progressEvent) {
    // Do whatever you want with the native progress event
  },
  //允许处理下载的进度事件
  onDownloadProgress: function (progressEvent) {
    // Do whatever you want with the native progress event
  },
  //定义允许的http响应内容的最大大小(以字节为单位)
 maxContentLength: 2000,
  validateStatus: function (status) {
    return status >= 200 && status < 300; // default
  },
//定义在node.js中要遵循的最大重定向数。
 maxRedirects: 5, // default
 socketPath: null, // default
//“httpAgent”和“httpsAgent”定义了一个执行http时使用的自定义代理
//和https请求，分别在node.js中。这允许像这样添加选项
//默认情况下未启用的“keepAlive”。
  httpAgent: new http.Agent({ keepAlive: true }),
  httpsAgent: new https.Agent({ keepAlive: true }),
  
//“proxy”定义代理服务器的主机名和端口。
//您还可以使用传统的“http_proxy”和“https_proxy”环境变量。
 proxy: {
    host: '127.0.0.1',
    port: 9000,
    auth: {
      username: 'mikeymike',
      password: 'rapunz3l'
    }
  },
//指定可用于取消请求的取消令牌
cancelToken: new CancelToken(function (cancel) {
  })
}

四、配置全局默认值

您可以指定将应用于每个请求的配置缺省值。

axios.defaults.baseURI = "";
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.timeout=3000;

五：拦截器

您可以在处理请求或响应之前拦截它们。
(1)添加一个请求拦截器

    axios.interceptors.request.use(function (config) {
        //在发送请求之前做些什么
        //TODO
        return config;
    }, function (error) {
        //处理请求错误
        return Promise.reject(error);
        //alert("请求超时")
    });

(2)添加一个响应拦截器

    axios.interceptors.response.use(function(response){
       //处理响应数据
        return response;
    },function(error){
        //处理响应错误
        return Promise.reject(error);
    });

(3)如果以后需要删除拦截器，可以这样做。

const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

六、处理错误

axios.get('/user/12345')
  .catch(function (error) {
    if (error.response) {
      // 发出请求后，服务器用状态代码进行响应
      //错误的状态代码不在2xx的范围内
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // 已提出请求，但未收到答复
      // `error.request` 是浏览器中XMLHttpRequest的一个实例，也是
      // NodeJS中的http.ClientRequest 
      console.log(error.request);
    } else {
      // 在设置引发错误的请求时发生了一些事情
      console.log('Error', error.message);
    }
    console.log(error.config);
  });
少年梦fire
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
axios学习教程全攻略
12-12
前言 随着 vuejs 作者尤雨溪发布消息，不再继续维护vue-resource，并推荐大家使用 axios 开始，axios 被越来越多的人所了解。...axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征
Axios使用方法详解，从入门到进阶
热门推荐
青春木鱼的博客
08-16 3万+
Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js中。Axios（相比于原生的XMLHttpRequest对象来说） 简单易用,（相比于jQuery）axios包尺寸小且提供了易于扩展的接口，是专注于网络请求的库。
axios学习
一个小白，博文源于浏览各个大佬所得，感谢行业大佬们！
10-14 360
axios
【Java Web】Axios实现前后端数据异步交互
最新发布
想做职场小白吗? 我来教您.......
06-27 738
若axios发送的是一个错误、异常的请求，请求拦截器方法2执行处理后，会直接响应给axios请求方法一个失败的Promise对象。后端服务器在处理正常的请求后，响应报文在返回给axios发送请求的调用函数之前会先经过响应拦截器，如果后端响应的是正常的报文则由响应拦截器的方法1处理响应报文后，将其返回给axios请求方法；axios是代替原生的ajax实现前后端数据交互的一套新解决方案，而axios使用的是promise相关的语法，而Promise主要是解决函数回调的问题。
细谈Axios中那些不为人知的秘密！一文读懂Axios
纸飞机博客
08-19 1万+
Axios是一个基于promise的HTTP库，类似于jQuery的ajax，用于http请求。可以应用于浏览器端和node.js，既可以用于客户端，也可以用于node.js编写的服务端。Axios支持Promise API，拦截请求与响应，转换请求数据和响应数据，取消请求自动转换JSON数据客户端，支持防御XSRF。
19.JavaWeb-axios
LB_bei的博客
07-13 131
axios被用来前端与后端进行数据交互。
轻松掌握Axios：JavaWeb中使用Axios的基本技巧
2301_77478553的博客
07-17 576
说到axios我们就不得不说下Ajax。在旧浏览器页面在向服务器请求数据时，因为返回的是整个页面的数据，页面都会强制刷新一下，这对于用户来讲并不是很友好。并且我们只是需要修改页面的部分数据，但是从服务器端发送的却是整个页面的数据，十分消耗网络资源。而我们只是需要修改页面的部分数据，也希望不刷新页面，因此异步网络请求就应运而生。异步网络请求。Ajax能够让页面无刷新的请求数据。实现ajax的方式有多种，如jQuery封装的ajax，原生的XMLHttpRequest，以及axios。
Axios学习笔记之使用方法教程
01-19
最近正在学习Axios，相信大家都知道Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。所以本文将详细介绍关于Axios使用方法的相关内容，分享出来供大家参考学习，下面话不多说，来一起看看详细的...
axios学习笔记（一）：学习HTTP相关的技术知识点
01-08
总的来说，HTTP协议是Web开发中不可或缺的一部分，理解其工作原理对于学习和使用axios等网络库至关重要。在后续的学习笔记中，我们将更深入地了解axios的使用，包括发送不同类型的HTTP请求，处理响应，以及如何利用...
JavaWeb-10-Ajax、Axios
yelitoudu的博客
05-30 172
① 准备数据地址：http://yapi.smart-xwork.cn/mock/169327/emp/list。// //浏览器访问任何地址都是以get方式访问的，所以直接使用浏览器访问该地址会报错404(请求失败)当客户端（浏览器）向服务器请求数据的时候，需要服务器响应数据给客户端之后，客户端才可以执行其他操作。当客户端（浏览器）向服务器请求数据的时候，客户端则不需要等待服务器响应结果，客户端可以执行其他操作。// 响应成功：以字符串形式返回响应数据。//（发送请求到服务端，加载数据）
vue学习笔记（六）——axios的使用和$refs和$nextTick使用
weixin_56370772的博客
11-19 225
axios 是一个专门用于发送ajax请求的库官网:特点支持客户端发送Ajax请求支持服务端Node.js发送请求支持Promise相关用法支持请求和响应的拦截器功能自动转换JSON数据axios 底层还是原生js实现，内部通过Promise封装的什么是ajax?一种前端异步请求后端的技术ajax原理?浏览器window接口的XMLHttpRequestaxios是什么?基于原生ajax+Promise技术封装通用于前后端的请求库。
Axios学习
H13986553752的博客
05-20 122
axios中文文档Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。基于promise的网络请求库，可以在nodejs和浏览器中运行，是isomorphic的，意思就是同一套代码在浏览器和nodejs都可以运行。在服务端axios使用原生的nodejs的http模块，在客户端浏览器中则而是用xmlhttprequests，本质是对XHR的封装，只不过是promise的实现版本。
【axios】axios的基础知识和使用
早睡早起长头发的博客
01-26 1364
相比于 jQuery，axios 更加轻量化，不能操作DOM元素，只专注于网络数据请求。相比于原生的 XMLHttpRequest 对象，axios 简单易用。axios在请求到数据之后，在真正的数据(data)之外，套了一层壳。// 调用 axios 方法得到的返回值是Promise对象。method: '请求的类型'，url: '请求的 URL地址'method: '请求的类型'，url: '请求的 URL地址'，不能操作DOM元素。
Axios的学习
m0_53874326的博客
07-20 180
在学习axios之前，我们首先应该已经接触到了Ajax。在旧浏览器页面在向服务器请求数据时，因为返回的是整个页面的数据，页面都会强制刷新一下，这对于用户来讲并不是很友好。而我们只需要修改页面的一部分内容，但是从服务器端发送的却是整个页面的数据，十分消耗网络资源。而我们只是需要修改页面的部分数据，也希望不刷新页面，因此异步网络请求就应运而生。异步网络请求。Ajax能够让页面无刷新的请求数据。实现ajax的方式有多种，如jQuery封装的ajax，原生的XMLHttpRequest，以及axios。
【axios】axios前端技术详解
东方神剑
07-04 1591
【axios】axios前端技术详解
JavaWeb学习路线（1）——Ajax到Axios
Zain_horse的博客
06-11 620
Ajax -> Axios
axios基础（一）
爱折腾的技术人
01-09 136
axios1
axios的学习
胡图图不糊涂的博客
04-28 337
一、axios的说明 axios：axios（理解为ajax i/o system比较好） 二、axios的基本使用 默认为get请求，且get对应params，post对应data axios({ url: 'http://httpbin.org/get', params: { page: 1 } }).then((data) => { console.log(d...
axios 学习 pdf
09-03
1. 安装和导入：首先需要通过npm或者yarn安装axios，然后在需要使用它的文件中，使用import或者require语句导入axios模块。 2. 发送请求：使用axios发送请求非常简单，只需要调用axios的方法并传入请求的URL和其他...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值