axios学习笔记

最新推荐文章于 2024-05-27 00:10:47 发布
最新推荐文章于 2024-05-27 00:10:47 发布
阅读量8.3k 收藏 6
点赞数 2
分类专栏： JS学习笔记 文章标签： axios promise ajax
彭先生版权所有，未经授权是非法行为。欢迎访问我的个人网站：www.bookbook.cc
本文链接：https://blog.csdn.net/weixin_43742708/article/details/109897470
版权

文章目录

一、什么是 axios?

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
中文文档：axios中文文档

1.1 特性

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

1.2 常用http请求

增POST 删DELETE 改PUT 查GET

  1. GET：从服务器端读取数据
  2. POST：向服务器端添加新数据
  3. PUT：更新服务器端已经数据
  4. DELETE：删除服务器端数据

二、axios 的基本使用

使用 axios 需要先引入或者安装，本文默认你已经引入 axios

CDN地址：

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0/axios.js"></script>

NPM:

npm install -g axios

2.1 搭建服务器

这里我们使用 JSON-Server这个,他能帮助我们在极短的时间内搭建一个REST API接口。

GitHub地址：JSON-Server

安装 JSON Server：

npm install -g json-server

Create a db.json file with some data:

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

Start JSON Server:

json-server --watch db.json

经过以上步骤我们在 本地的 http://localhost:3000就开启了一个 REST API,便于我们测试。

2.1 普通方式 GET 无参

这里我们配置一下默认路径,下文默认你已经配置

axios.defaults.baseURL = 'http://localhost:3000'

默认请求方式即是 GET。

axios.defaults.baseURL = 'http://localhost:3000'
axios({
  url: 'posts',
  method: 'GET' // default
}).then(value => {
  console.log(value.data);
})

//语法糖形式：
axios.get('/posts').then(value =>{
  console.log(value.data);
})

output:
在这里插入图片描述

2.2 普通方式 GET 有参

我们先在 db.json 增加一些内容，增加后如下：

{
  "posts": [
    {"id": 1,"title": "json-server","author": "typicode"},
    {"id": 2,"title": "盲僧","author": "张三"},
    {"id": 3,"title": "瑞文","author": "李四"},
    {"id": 4,"title": "亚索","author": "王五"}
  ],
  "comments": [
    {
      "id": 1,
      "body": "some comment",
      "postId": 1
    }
  ],
  "profile": {
    "name": "typicode"
  }
}

请求方式：

axios({
  // 方式一
  // url: 'posts?id=2',

  // 方式二：
  url: 'posts',
  params: {
    id: 2
  },
  method: 'GET' // default
}).then(value => {
  console.log(value.data);
})
//语法糖形式：
axios.get('/posts', {
  params: {
    id: 2
  }
}).then(value =>{
  console.log(value.data);
})

output:
在这里插入图片描述

2.3 POST有参数

axios({
  url: 'posts',
  method: 'POST',
  data: {
    title: "寒冰",
    author: "设计师"
  }
  
}).then(value => {
  console.log(value.data);
})

发送后 db.json 文件就会多出来一个数据，如下：
在这里插入图片描述
id 是自动增加的。

2.4 并发请求

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.css">
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0/axios.js"></script>
</head>

<body>
  <button class="btn btn-primary">并发请求</button>
  <script>
    axios.defaults.baseURL = 'http://127.0.0.1:3000'

    let btn = document.querySelector('button')
    btn.onclick = function () {
      axios.all([
        axios.get('/posts'),
        axios.get('/posts', {
          params: {
            id: 4
          }
        })
      ]).then(value => {
        console.log(value);
      }).catch(reason => {
        console.log(reason);
      })
    }
  </script>
</body>

</html>

结果：
在这里插入图片描述

三、axios 实例

const instance = axios.create({
  baseURL: 'http://127.0.0.1:8000',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

instance({
  url: 'posts',
  method: 'GET' // default
}).then(value => {
  console.log(value.data);
})

instance.get('/posts').then(value => {
  console.log(value.data);
})

四、 Vue 二次封装 axios

4.1 首先封装 axios

方式一：

request.js

import axios from 'axios'

// 封装 axios
export function request(config) {
  // 1.创建axios的实例
  const instance = axios.create({
    baseURL: "http://127.0.0.1:8000/api",
    timeout: 5000
  })

  // 2.axios的拦截器

  // 2.1 请求拦截
  instance.interceptors.request.use(config => {
    return config
  }, err => {
    console.log(err);
  });

  // 2.2 响应拦截
  instance.interceptors.response.use(res => {
    return res.data
  }, err => {
    console.log(err);
  })

  // 3.发送真正的网络请求 axios本身返回Promise
  return instance(config)
}

方式二：

import axios from 'axios'
import Vue from 'vue'

// 导入 Nprogress 对应的JS和CSS
import NProgress from "nprogress"
// 改用 CDN方式
// import "nprogress/nprogress.css" 

axios.defaults.baseURL = `http://120.53.120.229:8888/api/private/v1/`
// axios.defaults.baseURL = `https://www.liulongbin.top:8888/api/private/v1/`

// 添加 请求头 和 进度条 NProgress.start()
axios.interceptors.request.use(config => {
  // 添加 进度条
  NProgress.start()

  // 添加请求头
  config.headers.Authorization = window.sessionStorage.getItem('token')

  return config
})

axios.interceptors.response.use(config => {
  // 隐藏 进度条
  NProgress.done()
  return config
})

Vue.prototype.$http = axios

4.2 二次封装

比如我们可以把 首页所有的请求相关的 API封装到一个 JS文件
到时候只需要传入响应的参数即可。
home.js

import { request } from './request'
// 二次封装

export function getHomeMutidata(){
  return request({
    url:"/home/multidata"
  })
}

export function getHomeGoods(type,page){
  return request({
    url:"/home/data",
    params:{
      type,
      page
    }
  })
}
优雅哥cc
关注
专栏目录
单页面 script 标签引入 axios
SDAW_1的博客
05-17 1596
axios.js 文件 /* axios v0.20.0 | (c) 2020 by Matt Zabriskie */ (function webpackUniversalModuleDefinition(root, factory) { if(typeof exports === 'object' && typeof module === 'object') module.exports = factory(); else if(typeof define === 'functi
Axios源码解析
KeAiDeTuDou的博客
10-18 611
Axios源码解析 总述 Axios是一个NB的网络请求库(前后端神器)，基于Promise封装了HTTP请求，用于浏览器和node.js，GitHub 77000+ Star（截至2020年10月18日）。也是前端必备的一个第三方库。 Axios的代码不算复杂，反而清晰易懂、十分优雅（个人觉得特别是请求/响应拦截器的处理和cancelToken的处理），另外它涉及了很多JavaScript的基础知识，非常适合用来巩固基础。
vue3 setup 语法糖axios的引入和基本使用
最新发布
qq_69073409的博客
05-27 434
安装axios、配置axios、导入request 使用api
iOS开发装逼技能之语法糖
moses的博客
04-28 3092
iOS开发装逼技能之语法糖
axios和async / await的基本用法
前端、python爱好者
07-20 1万+
主要使用本地自建的cookie工具或者vue提供的vue-cookie以及element-ui框架和nprogress进度条模块，大家可以对照自己代码直接复制使用。为了我们的代码健壮性，因此本质上只要有.then()就得跟一个.catch()，至于finally()则看情况添加。这个时候我们可以直接使用 新增的语法糖 async 和await ，使用起来更加的舒服方便，代码看起来也更简洁。当然实际的开发项目中，如果我们使用了统一的请求模块，用 .then()取到正确的数据，.catch()捕获错误，
前端-axios学习笔记
07-14
前端-axios学习笔记
Axios学习笔记之使用方法教程
01-19
所以本文将详细介绍关于Axios使用方法的相关内容，分享出来供大家参考学习，下面话不多说，来一起看看详细的介绍： Axios Github 功能特性 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 ...
axios学习笔记（一）：学习HTTP相关的技术知识点
01-08
... 2. 服务器接收到请求后...在后续的学习笔记中，我们将更深入地了解axios的使用，包括发送不同类型的HTTP请求，处理响应，以及如何利用axios进行更复杂的网络操作。通过这些知识，开发者能够更好地构建和维护Web应用。
在npm官网发布自己的包
欢迎访问我的主页：https://www.bookbook.cc
04-19 1311
在npm官网发布自己的包
axios基本语法
weixin_50736511的博客
11-03 927
axios基本语法 html设置4个按钮再js获取别忘了引入axios //指定默认配置 axios.defaults.baseURL=‘http://localhost:3000’ 发送get请求 axios({ url:’/posts’, //url参数 对象 params:{ id: 1 }, }) .then(a=>{ console.log(a.data); }) axios默认发get请求搜易不用定义 method属性 发送post请求 axios({ url:’/pos
axios基本使用前端自用
是千汇的博客
09-17 1650
axios是一个功能强大的网络请求库，可以非常方便的发送请求，功能和ajax类似。 使用axios 导入官方js <script src="https://unpkg.com/axios@0.20.0/dist/axios.min.js"></script> 用法：（分为get请求和post请求） 使用get或post方法可以发送对应的请求，then方法中的回调函数会分别响应成功和失败的情况。（第一个函数响应成功，第二个函数响应失败） get请求： 成功执行第一个方法， 否则执行第
axios cdn 引入_axios基本使用
weixin_39886205的博客
01-18 1万+
前言通过在之前的学习当中，对于初学者来说能使用html实现的那就是一个完整的页面，不得不说html是一门很好的基础语言，我们学习vue也是建立在html之上的，vue是一套相对完整的语言系统，它既能实现静态页面的制作，也能向服务器发送请求。下面我来介绍一个vue中比较重要的语法axios为Ajax奠定基础我们在构建应用时需要访问一个API并展示数据，做这件事的方法有好几种，而使用基于Promise...
axios通过cdn引入使用小计
weixin_45438997的博客
08-16 9058
一、引入axios.js https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js 二、使用axios.js发送请求 1、发送Get请求(url传参) axios.get('url?params1=xxxx') .then(function (res) { // 请求成功返回 console.log(res); }) .catch(function (err) { // 请求失败返回 console.
Vue3.0的setup里面使用axios,以及跨域问题的解决.(setup语法糖),setup语法糖使用axios教程.setup使用axios
qq_37189642的博客
09-02 9476
一.介绍 我们先看一张图 这是vue3.2.1版本以上的vue语法糖,只能这么写了. 二.在setup里面使用Axios 1.安装 在cmd中先安装axios npm install --save axios vue-axios 2.main.js中注册 在main.js中引入后用app.config.globalProperties 注册全局方法 //main.js //引入 import VueAxios from 'vue-axios' import axi...
axios在vue中的简单配置与使用
热门推荐
大灰狼的小绵羊哥哥的博客
04-05 8万+
尤雨溪之前在微博发布消息，不再继续维护vue-resource，并推荐大家开始使用 axios 。 一、axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：https://hzzly.github.io/2017/03/12/axios%E5%9C%A8vue%E4%B8%AD%E7%9A%84%
vue中cdn引入axios，请求接口，渲染数据
前端视听
05-19 4050
代码示例： <!DOCTYPE html> <html> <head> <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css"
Vue学习笔记(五): 使用axios进行前后端交互
"这篇VUE学习笔记主要介绍了如何在Vue项目中引入并使用axios库进行前后端数据交互。Axios是一个基于Promise的HTTP库，适用于浏览器和node.js环境。在Vue中，通常使用axios来处理HTTP请求，如GET和POST。笔记首先指导...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

优雅哥cc

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值