精华内容
下载资源
问答
  • axios学习笔记

    千次阅读 2020-11-25 23:59:32
    axios学习笔记

    一、什么是 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
        }
      })
    }
    
    展开全文
  • axios学习

    2020-03-04 20:25:55
    在vue中调用接口时会使用axios,并且这也是vue官方推荐的。 axios的简单使用 axios.get("api/index.json") .then(res=>{ //这里的data时固定的,用来获取后端响应的数据 //res返回的是一个对象,而真实的...

    在vue中调用接口时会使用axios,并且这也是vue官方推荐的。

    axios的简单使用

    axios.get("api/index.json")
    	.then(res=>{
    		//这里的data时固定的,用来获取后端响应的数据
    		//res返回的是一个对象,而真实的数据都在data属性里
    		console.log(res.data)		
    	})
    

    看了在代码中如何应用后,再看看官网的描述:易用、简洁且高效的http库,用来调用后端的接口

    axios的常用API

    • get:查询数据
    • post:添加数据
    • all & spread:解决请求高并发
    • put:修改数据
    • delete:删除数据

    实际上看就是对后端的数据做增删改查。axios做的就是将http协议封装为api,让我们可以更好的去使用。

    get(delete与get除了协议不同其他相同)

    get提供了一个参数:params。看代码也能发现它可以将api后面接的参数放在params这个对象中。

    // 为给定 ID 的 user 创建请求
    axios.get('/user?ID=12345')
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
    
    // 可选地,上面的请求可以这样做
    axios.get('/user', {
        params: {
          ID: 12345
        }
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
    

    post(put与post除了协议不同其他相同)

    在此之前,使用koa2时都是用postman去模拟post,但是现在可以使用axios.post去直接调用post方法。

    axios.post('/user', {
    	//需要添加的值,默认格式为json
        firstName: 'Fred',
        lastName: 'Flintstone'
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
    

    执行并发的请求

    function getUserAccount() {
      return axios.get('/user/12345');
    }
    
    function getUserPermissions() {
      return axios.get('/user/12345/permissions');
    }
    
    axios.all([getUserAccount(), getUserPermissions()])
      .then(axios.spread(function (acct, perms) {
        // 两个请求现在都执行完成
      }));
    

    axios对结果的包装

    从第一个简单使用可以看出,想要获取结果,就得调用res.data。这也说明了axios确实对数据进行了处理。接下来就看看res里面有什么

    • data:后端的数据,默认json形式
    • headers:响应头信息
    • status:响应状态码
    • statusText:响应状态信息
    • -config:包含了此次请求的一些信息,比如域名、请求方法等等

    axios全局配置

    • axios.defaults.timeout=xxxx:设置超时时间,过了时间就报错
    • axios.defaults.baseURL=“xxxx”:设置默认地址
    • axios.defaults.headers.post[‘Content-Type’] = ‘application/json’:设置头部信息,比如常用的格式设置为json

    详情请访问 axios中文文档

    展开全文
  • Axios学习

    2020-11-26 13:02:25
    推荐: — axios中文官方文档 — 什么是axios? Axios是一个基于promise的HTTP库, 可以用在浏览器和node.js中 基本使用 安装 npm install axios 基本用例 import axios from 'axios' // 默认get请求 axios('...

    推荐: axios中文官方文档

    1. 什么是axios?
      Axios是一个基于promise的HTTP库, 可以用在浏览器和node.js中

    2. 基本使用
      安装

    npm install axios

    基本用例

    import axios from 'axios'
    // 默认get请求
    axios('http://123.207.32.32:8000/user/12345')
    // 执行Get请求
    const url = 'http://123.207.32.32:8000/user?ID=12345'
    axios.get('url').then(res => {
      console.log(res)
    }).catch(err => {
      console.log(err)
    })
    // 上面get请求也可以这样做
    axios.get('http://123.207.32.32:8000/user', {
      params: {
        ID: 12345
      }
    }).then(res => {
      console.log(res)
    }).catch(err => {
      console.log(err)
    })
    //执行post请求
    axios.post('http://123.207.32.32:8000/user', {
      firstName: 'Fired',
      lastName: 'Flintstone'
    }).then(res => {
      console.log(res)
    }).catch(err => {
      console.log(err)
    })
    //也可以这样
    axios({
      url: 'http://123.207.32.32:8000/user/12345',
      method: 'post',
      data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
      }
    });
    //axios.all(itemable),axios.spread(callback)执行多个并发请求
    const getUserAccount = () => {
      return axios.get('http://123.207.32.32:8000/user/12345')
    }
    
    const getUserPermissions = () => {
      return axios.get('http://123.207.32.32:8000/user/permissions', {
        params: {
          ID: 12345
        }
      })
    } 
    // axios.all([config1,config2]).then(axios.spread((res1,res2) => {}))
    axios.all([getUserAccount(), getUserPermissions()])
      .then(axios.spread((res1, res2) => {
        console.log(res1)
        console.log(res2)
      }))
    // axios.all() 可以同时进行多个并发请求
    // axios.spread() 可以将多个返回进行拆分
    
    1. 创建实例
    const instance = axios.create({
      baseURL: 'http://123.207.32.32:8000',  //基本url,用于url重复部分
      timeout: 1000,  //请求超时设定,单位毫秒
    })
    
    instance('/home/multidata').then(res => {
      console.log(res)
    })
    
    1. 拦截器
      在请求或相应被 then 或 catch 处理前拦截它们
    // 请求拦截器
    axios.interceptors.request.use(config => {
      //在请求之前的处理
      //处理完成后必须返回config
      return config
    }, err => {
      // 请求错误时的处理
      return Promise.reject(error)
    })
    
    //响应拦截器
    axios.interceptors.request.use(response=> {
      //对于相应返回的处理
      return response
    }, err => {
      //响应错误时的处理
      return Promise.reject(err)
    })
    
    1. 封装request 模块

    在真实的项目开发过程中,一般讲axios单独做为项目中一个模块
    在src中新建utils文件夹,新建request.js文件
    request.js

    import axios from 'axios'
    
    const request = config => {
      //创建axios实例
      const instance = axios.create({
        baseURL: 'http://123.207.32.32:8000',
        timeout: 5000
      });
      //请求拦截器
      instance.interceptors.request.use(config => {
         console.log(config)
         return config
      }, err => {
         console.log(err)
      })
      //响应拦截器
      instance.interceptors.response.use(response => {
         console.log(response)
         return response
      },err => {
        console.log(err)
      })
    }
    
    export default request
    

    其他子文件request引用

    import request from '@/utils/request'
    const getUserAccount = (data) => {
      let url = ''
      for(let key in data){
       if(data[key] != '' && data[key] != null){
         url = url + '&' + key + '=' + encodeURIComponent(data[key])
       }
      }
      return request.get(`/user/permissions?${url}`)
    }
    export getUserAccount
    
    展开全文
  • axios学习与使用

    2019-02-21 17:57:00
    官方中文介绍 此处记录一下常用的写法 执行 GET 请求 // 为给定 ID 的 user 创建请求 axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .ca...

    最近的项目都是使用的vue框架,所以请求都使用了vue官方推荐的axios。

    官方中文介绍

    此处记录一下常用的写法

    • 执行 GET 请求
    // 为给定 ID 的 user 创建请求
    axios.get('/user?ID=12345')
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
    
    // 可选地,上面的请求可以这样做
    axios.get('/user', {
        params: {
          ID: 12345
        }
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });

    实际用例

    this.axios.get('***/edu-upload/token/', {headers: {
                'token': this.$store.state.UserMod.token
              }}
          )
            .then(function (respone) {
              if (respone.status === 200) {
                console.log(respone)
                me.uploadInfo = respone.data
                me.uploadFile(file,me)
              }
            })
            .catch(function (error) {
              console.log(error)
            })

     

    • 执行 POST 请求
    axios.post('/user', {
        firstName: 'Fred',
        lastName: 'Flintstone'
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });

    实际用例

    this.axios.post(url_pref + '/release/add', JSON.stringify(params),
            {headers: {'Content-Type': 'application/json', 'token': this.$store.state.UserMod.token}})
            .then(function (respone) {
              if (respone.status === 200 && respone.data.code == 0) {
                console.log(respone)
                me.handleOkBtn()
              } else {
                alert("发布失败!");
              }
            })
            .catch(function (error) {
              console.log(error)
              me.$notify.error({
                title: '错误',
                message: '发布备课失败!'
              })
            })

     

    • 执行多个并发请求
    function getUserAccount() {
      return axios.get('/user/12345');
    }
    
    function getUserPermissions() {
      return axios.get('/user/12345/permissions');
    }
    
    axios.all([getUserAccount(), getUserPermissions()])
      .then(axios.spread(function (acct, perms) {
        // 两个请求现在都执行完成
      }));

     

    axios API

    可以通过向 axios 传递相关配置来创建请求

    axios(config)

    // 发送 POST 请求
    axios({
      method: 'post',
      url: '/user/12345',
      data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
      }
    });

    axios(url[,config])

    // 发送 GET 请求(默认的方法)
    axios('/user/12345');

     

    转载于:https://www.cnblogs.com/shenting/p/10414294.html

    展开全文
  • axios学习总结

    千次阅读 2017-07-09 10:50:45
    axios基本用法(JS HTTP库/Ajax库)特征 从浏览器中创建 XMLHttpRequests ...支持 Promise API 拦截请求和响应 ...安装和引用首先就是引入axios,如果你使用es6,只需要安装axios模块之后:import axios from 'ax
  • 学习axios

    2020-05-23 11:39:50
    axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,本质上也是对原生XHR的封装,只不过它是Promise的实现版本,符合最新的ES规范,它本身具有以下特征: 1.从浏览器中创建 XMLHttpRequest ...axios 的.
  • axios 基于promise用于浏览器和node.js的http客户端 特点 支持浏览器和node.js 支持promise 能拦截请求和响应 能转换请求和响应数据 能取消请求 自动转换JSON数据 浏览器端支持防止CSRF(跨站请求伪造) 安装...
  • axios中文文档整理

    2021-01-20 18:28:32
    axios axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,本质上也是对原生XHR的封装,只不过它是Promise的实现版本,符合最新的ES规范 有以下特点: 从浏览器中创建 XMLHttpRequests 从 node.js 创建 ...
  • 一,Axios的介绍 二,Axios的配置 三,Axios的基本格式 四,使用Axios获取数据 一,Axios的介绍 官方介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。 特性: 从浏览器中创建 ...
  • 1.2、为什么学习axios?1.3、前置内容与环境准备1.3.1、json-server安装使用1.3.2、axios安装1.4、入门案例二、axios API2.1、请求方法2.2、并发请求2.3、创建axios实例三、请求配置四、响应结构说明五、默认配置5.1...
  • 一起学习axios拦截器

    2021-03-18 20:55:34
    axios中文文档(非官方) https://www.kancloud.cn/yunye/axios/234845 axios官方文档地址(英文) https://github.com/axios/axios 请求(request)拦截器 前端请求接口时首先向服务端发送请求的接口
  • React+Antd+Axios学习总结

    千次阅读 2019-09-11 09:12:24
    作为一个程序员一手创了卡尔维诺中文站!国内第一卡大人忠实铁粉是一位前端工程师!!想要签名嘤嘤嘤) (顺便……JS终于可以支持类了,所以Java程序员学React这些理论上更容易嘛→_→) React中常见的ES6写法还有...
  • 源码学习01 Axios

    2019-07-31 17:44:24
    Axios是一个基于Promise的HTTP请求库,可以用在浏览器和Node.js中。... 它的使用简便、灵活,并且有interceptors、数据转换器等强大的功能,以前用的时候并没有...以后要多多的读源码,更多的独立完成,向大神们学习
  • axios axios必须先导入才可以使用 ...中文文档:http://www.axios-js.com/zh-cn/docs/index.html GitHub:https://github.com/axios/axios 简单入手 <!DOCTYPE html> <html lang="en"> <head>
  • 首先如果是新项目 最好使用 react脚手架 create-react-app 简单方便干净。 该文章地址:https://blog.csdn.net/qtfying/article/details/78665664 引入react框架 1,直接在网页引入 ...amp
  • 引言 ... 前端技术真是一个发展飞快的领域,我三年前入职的时候只有原生XHR和Jquery ajax,我们还曾被JQuery 1.9版本版本以下不支持大...一晃眼,JQuery ajax早已不能专美于前,axios和fetch都已经开始分别抢占“请...
  • 先附上axios中文文档地址https://www.kancloud.cn/yunye/axios/234845/234845 相信文档api解释和使用都很清楚了,而我在这介绍的是Promise,因为axios中涉及了promise,现在 我们来弄懂promise是什么 1.promise是...
  • message: '昵称是必须的,最好是汉字', trigger: 'blur' } ] } } }, methods: { // ... submit () { this.$refs.ReginForm.validate(valid => { if (valid) { this.logining = true console.log('开始...
  • 首先放上axios中文文档 首先要看文档了解什么是axios,使用方法有哪些?axios中文网介绍了3种使用方式: 1 可以通过向axios传递相关配置来创建请求 axios({ method:"POST",//设置请求方式,不设置默认是get ...
  • 什么是Axios Axios是一个开源的可以用在浏览器端和Node JS 的异步通信框架,她的主要作用就是实现AJAX异步通信,其功能特点...中文文档 为什么要使用Axios 由于vue.js是一个视图层框架并且作者(尤雨溪)严格准守SoC
  • Axios中文文档 概要说明 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。 特性: 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API 拦截请求和响应 转换请求...
  • 正在用react写一些项目,但是很多需要用到的知识,没有合适的中文文档可以查看和学习。 于是就有了自己翻译官方文档的想法。 我英语水平一般,很多单词不认识,都是靠百度和搜集相关资料查到的。如有错误,欢迎在...
  • Vue-cli 1.什么是 vue-cli ...vue-cli 的中文官网首页:https://cli.vuejs.org/zh/ 2. 安装 vue-cli vue-cli 是基于 Node.js 开发出来的工具,因此需要使用 npm 将它安装为全局可用的工具: npm install -g @
  • Axios 中文使用说明文档地址:Axiox 中文说明文档 我只是记录下写法,两种请求都能正常运行: 1. 安装: npm install axios 2.在 main.js 中加上以下配置: // 用于和后台交互,发送请求 import axios from '...
  • axios快速入门

    2019-01-03 23:01:11
    axios中文文档: https://www.kancloud.cn/yunye/axios/234845 这边博客写的不错:https://www.jianshu.com/p/df464b26ae58 一、简介 axios 是一个基于 Promise 的 HTTP 客户端,专门为浏览器和 ...
  • Vue前端框架学习(三):使用axios进行数据请求axios的简介axios的安装 axios的简介 axios是一个基于promise的HTTP库,用于数据请求。它有一下特性: 支持promise API 拦截请求和响应 转换请求数据和响应数据...
  • 【狂神说Java】Vue视频 什么是Axios   Axios是一个开源的可以用在浏览器端和Node JS的异步通信框架, 她的主要作用就是实现AJAX异步通信,其功能特点如下: 从浏览器中创建XMLHttpRequests ...  中文
  • 我们来学习axios,这个是封装了http请求的,很好用的一个东西.可以看到网址 然后我们要学的东西有,使用方法 以及源码分析,以及我们要仿写一个axios出来. 需要的前置知识,这里需要promise的知识 还有ajax的...
  • 这次给大家带来axios实现数据交互步骤详解,axios...所以学习了下,总结如下。一、功能特性1、在浏览器中发送 XMLHttpRequests 请求2、在 node.js 中发送 http请求3、支持 Promise API4、拦截请求和响应5、转换请求...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,177
精华内容 870
关键字:

axios中文学习