Axios后端程序员快速入门简述

这篇具有很好参考价值的文章主要介绍了Axios后端程序员快速入门简述。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

        axios 它的底层是用了 XMLHttpRequest(xhr)方式发送请求和接收响应,xhr 相对于之前讲过的 fetch api 来说,功能更强大,但由于是比较老的 api,不支持 Promise,axios 对 xhr 进行了封装,使之支持 Promise,并提供了对请求、响应的统一拦截功能

安装

没下载nvm你就不要试了

npm install axios -S

代码导入

import axios from 'axios'

  • axios 默认导出一个对象,这里的 import 导入的就是它默认导出的对象

后面会有代码案例供参考

方法

Axios后端程序员快速入门简述

 

  • config - 选项对象、例如查询参数、请求头...

  • data - 请求体数据、最常见的是 json 格式数据

  • get、head 请求无法携带请求体,这应当是浏览器的限制所致(xhr、fetch api 均有限制)

  • options、delete 请求可以通过 config 中的 data 携带请求体

<template>
    <div>
        <input type="button" value="获取远程数据" @click="sendReq()">
    </div>
</template>
<script>
import axios from 'axios'
const options = {
    methods: {
        async sendReq() {
            // 1. 演示 get, post
            // const resp = await axios.post('/api/a2');

            // 2. 发送请求头
            // const resp = await axios.post('/api/a3',{},{
            //     headers:{
            //         Authorization:'abc'
            //     }
            // });

            // 3. 发送请求时携带查询参数 ?name=xxx&age=xxx 特殊符号需要手动编码
            // const name = encodeURIComponent('&&&');
            // const age = 18;
            // const resp = await axios.post(`/api/a4?name=${name}&age=${age}`);

            // 不想自己拼串、处理特殊字符、就用下面的办法
            // const resp = await axios.post('/api/a4', {}, {
            //     params: {
            //         name:'&&&&',
            //         age: 20
            //     }
            // });

            // 4. 用请求体发数据,格式为 urlencoded,,参数为对象时使用
            // const params = new URLSearchParams();
            // params.append("name", "张三");
            // params.append("age", 24)

            // const resp = await axios.post('/api/a4', params);

            // 5. 用请求体发数据,格式为 multipart,参数为对象时使用
            // const params = new FormData();
            // params.append("name", "李四");
            // params.append("age", 30);
            // const resp = await axios.post('/api/a5', params);

            // 6. 用请求体发数据,格式为 json,参数为对象时使用
            const resp = await axios.post('/api/a5json', {
                name: '王五',
                age: 50
            });

            console.log(resp);
        }
    }
};
export default options;
</script>

创建实例——升级版

const _axios = axios.create(config);

  • axios 对象可以直接使用,但使用的是默认的设置

  • 用 axios.create 创建的对象,可以覆盖默认设置,config 见下面说明

Axios后端程序员快速入门简述

 

const _axios = axios.create({
    baseURL: 'http://localhost:8080',
    withCredentials: true
});
await _axios.post('/api/a6set')
await _axios.post('/api/a6get')

这里走的就不是vue.config.js中的配置了

  • 生产环境希望 xhr 请求不走代理,可以用 baseURL 统一修改

  • 希望跨域请求携带 cookie,需要配置 withCredentials: true,服务器也要配置 allowCredentials = true,否则浏览器获取跨域返回的 cookie 时会报错

响应格式

Axios后端程序员快速入门简述

 这是后端返回给前端获取到的对象的响应内容

  • 200 表示响应成功

  • 400 请求数据不正确 age=abc

  • 401 身份验证没通过

  • 403 没有权限

  • 404 资源不存在

  • 405 不支持请求方式 post

  • 500 服务器内部错误文章来源地址https://www.toymoban.com/news/detail-471185.html

到了这里,关于Axios后端程序员快速入门简述的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【python快速编程入门(第二版)黑马程序员课后编程题】

    第二章  python基础 1、课本33页练习:求圆的半径和面积; 用户输入圆的半径,输出圆的直径和面积。面积公式:s=π*r*r 2、#课本33页练习:计算运输次数; #煤场有29.5t,4t运了3次,其余用2.5t车运,还需几次才能运完 第三章  流程控制 1、#课本44页练习:用while循环输出100以内

    2024年02月04日
    浏览(51)
  • 程序员必知必会算法简述

    一个程序员一生中可能会邂逅各种各样的算法,但总有那么几种,是作为一个程序员一定会遇见且大概率需要掌握的算法。今天就来聊聊这些十分重要的“必抓!”算法吧~ 作为程序员,有一些重要的算法和数据结构是必须掌握的,它们可以帮助解决各种计算问题并提高代码

    2024年02月17日
    浏览(44)
  • axios快速入门

    上古浏览器页面在向服务器请求数据时,因为返回的是整个页面的数据,页面都会强制刷新一下,这对于用户来讲并不是很友好。并且我们只是需要修改页面的部分数据,但是从服务器端发送的却是整个页面的数据,十分消耗网络资源。而我们只是需要修改页面的部分数据,

    2024年04月09日
    浏览(27)
  • Ajax-Axios的快速入门

    概念:Asynchronous Javascript Anderson XML,异步的JavaScript和XML 作用:数据交换:通过Ajax可以给服务器发送请求,并获取服务器相应数据            异步交互:可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术 介绍:Axios对原生的Ajax进行了封装,简化

    2024年02月11日
    浏览(38)
  • 前端程序员和后端程序员有什么不同?我来告诉你薪资待遇差多少

    在过去,前端程序员的工资可能需要几倍于后端程序员才能相当。因为前端程序员需要处理的是看得见的部分,而且需要兼顾不同的浏览器、设备和操作系统,工作量较大。但是,随着H5的盛行和现代浏览器对HTML5、JavaScript和CSS的支持越来越好,前端程序员可以开发一次代码

    2023年04月22日
    浏览(85)
  • 〖程序员的自我修养 - 认知剖析篇⑤〗- 选择前端还是后端?

    人之所以会觉得迷茫,本质上是欠缺对自己的一个控制力、识别庞杂信息、去伪存真的独立思考与认知能力。 说明:该文属于 程序员的自我修养 专栏, 购买任意白宝书体系化专栏可加入 易编程社区, 早鸟价订阅模式除外 。 福利:加入社区的小伙伴们,除了可以获取博主

    2024年02月14日
    浏览(41)
  • Java后端程序员不得不知道的 API 接口常识

    至今我仍清晰地记得,那个电商教程是怎么定义接口的: 管它是增加、修改、删除、带参查询,全是 POST 请求一把梭,比如下面这样: 修改用户的收货地址 POST /xxx-mall/cart/update_address 现在看来,全部用 POST 请求估计是为了传参方便吧。 那个时候自己也没有一个  API 接口需

    2024年02月15日
    浏览(64)
  • 后端程序员的前端必备【Vue】 - 07 ES6新语法

    使用let定义变量能更加精准的确定变量的作用域 使用const定义常量,常量一旦定义不可以改变 使用模板字符串可以避免大量的字符串拼接 类似于springmvc中接受参数拥有默认值 使用箭头函数可以简化复杂的代码结构(类似于java中lambda表达式) 箭头函数应用 定义:从一个大的数

    2024年02月04日
    浏览(45)
  • 一分钟看懂:前端和后端,哪个更简单?转行程序员必看!

    大家好,这里是程序员晚枫,专注于转行程序员的1对1咨询,小红薯也叫这个名。 想转行程序员的朋友,在选择方向的时候都会遇到一个问题: 哪个技术方向适合我?前端和后端哪个更简单? 今天咱们就来一起分析一下~ 很多网上的消息或者培训机构的广告会告诉你:前端比

    2024年02月07日
    浏览(41)
  • 程序员/后端开发方向Java 跳槽注意事项(简历和面试经验分享)

    程序员/后端开发方向Java 跳槽注意事项(简历和面试经验分享) 应届生面试经验参考:https://www.cnblogs.com/rainbow-1/p/16779048.html 简历: 1、个人感觉还是要写真话,包装的内容要有一定的基础,问起来能够对答几个回合。 2、基本信息最好直接写年龄,而不是出生年月。跳槽简历

    2024年04月08日
    浏览(76)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包