深入解析Axios 常用的请求方法别名

下面小编就为大家分享一篇Axios 常用的请求方法别名,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。

Axios

是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
常用的请求方法别名一般有: Get/post/http协议请求

执行Get请求

function get(){
 return axios.get(‘/data.json‘, {
    params:{
     id:1234
    }
    }).then(function (response) {
     console.log(response);
    })
   .catch(function (error) {
    console.log(error);
   });//欢迎加入前端全栈开发交流圈一起学习交流:864305860
 }

使用get方法进行传参数的时候用的是 params方法

执行Post请求

function post(){
return axios.post(‘/data.json‘, {
  id:1234
    })//欢迎加入前端全栈开发交流圈一起学习交流:864305860
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });//欢迎加入前端全栈开发交流圈一起学习交流:864305860
 }

使用post方法进行传参数的时候是直接进行数据的传递,这也是两种方法的区别。

执行http协议请求

unction http(){
 return axios({
 method: ‘post‘,
 url: ‘/data.json‘,
 data: {
  id: 1111,
 },
params: {
 id:2222,
 }).then(res=>{
  this.msg=res.data;
 });//欢迎加入前端全栈开发交流圈一起学习交流:864305860
}

注意这里的区别,当使用post请求的时候,进行数据的传参使用的是data方法,而使用get请求的时候,使用的是params方法。

使用拦截器:

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

// 添加请求拦截器
mounted:function(){
  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);
   });//欢迎加入前端全栈开发交流圈一起学习交流:864305860
}

结语

感谢您的观看,如有不足之处,欢迎批评指正。

原文地址:https://www.cnblogs.com/qdgc/p/10146177.html

时间: 2024-11-12 15:28:12

深入解析Axios 常用的请求方法别名的相关文章

axios的post请求方法---以Vue示例

Axios向后端提交数据的参数格式是json,而并非用的是form传参,post表单请求提交时,使用的Content-Type是application/x-www-form-urlencoded,而使用原生AJAX的POST请求如果不指定请求头RequestHeader,默认使用的Content-Type是text/plain;charset=UTF-8. axios 请求配置中,transformRequest配置允许在向服务器发送前,修改请求数据. // `transformRequest`

HTTP两种请求方法:GET和POST基础了解

什么是 HTTP? 超文本传输协议(HTTP)的设计目的是保证客户机与服务器之间的通信.HTTP 的工作方式是客户机与服务器之间的请求与应答协议. 举例:客户端(浏览器)向服务器提交 HTTP 请求,服务器向客户端返回响应,响应包含关于请求的状态信息以及可能被请求的内容. 两种常用 HTTP 请求方法:GET 和 POST 在客户机和服务器之间进行请求与响应时,两种最常被用到的方法是:GET 和 POST. GET - 从指定的资源请求数据,即 POST - 向指定的资源提交要被处理的数据 GE

http协议请求方法

解析HTTP协议六种请求方法get.put.post.delete.options和trace含义与区别. 1.GET   selecr请求会向数据库发索取数据的请求,从而来获取信息,该请求就像数据库的select操作一样,只是用来查询一下数据,不会修改.增加数据,不会影响资源的内容,即该请求不会产生副作用.无论进行多少次操作,结果都是一样的. 2.PUT   update请求是向服务器端发送数据的,从而改变信息,该请求就像数据库的update操作一样,用来修改数据的内容,但是不会增加数据的种类

axios 常用的几个方法

Vue推荐使用axios 发送网络请求:最近重新开始做Vue项目,重新回归一下.从axios的几个方法开始吧. 1. 安装: 既然是Vue项目,我还是选择常用的npm的方式 $ npm install axios  (-d) 2. 引入: const axios =  require('axios')  或者babel转化用ESmodule的方式  const axios = import('axios') 3.请求: GET 请求,请求方式都非常灵活: axios.get('/user?ID=

axios请求方法封装.

axios的使用上一般封装好对应的方法,ES6导出,直接调用,消息通知使用了ElementUI的Message组件. 这是一个封装了axios的Rest风格的工具类,包扩常用的POST,GET,PUT,DELETE, 在请求处理上使用统一的请求拦截处理.对返回的消息进行拦截预处理,有数据返回数据,没有返回消息. import axios from 'axios' import router from '../router' import { Message } from 'element-ui'

基于Promise封装uni-app的request方法,实现类似axios形式的请求

https://my.oschina.net/u/2428630/blog/3004860 uni-app框架中 安装(项目根目录下运行) npm install uni-request --save 文件中引用 import uniRequest from 'uni-request'; 使用方法 请求方法的别名 uniRequest.request(config) uniRequest.get(url[, config]) uniRequest.delete(url[, config]) un

测试开发面试准备之HTTP协议-Http常用请求方法

那么HTTP请求报文和响应报文会是什么格式呢? 起始行:如 GET / HTTP/1.0 (请求的方法  请求的URL 请求所使用的协议) 头部信息:User-Agent  Host等成对出现的值 主体 不管是请求报文还是响应报文都会遵循以上的格式. 那么起始行中的请求方法有哪些种呢? GET: 完整请求一个资源 (常用) HEAD: 仅请求响应首部 POST:提交表单  (常用) PUT: (webdav) 上传文件(但是浏览器不支持该方法) DELETE:(webdav) 删除 OPTION

vue使用Axios做ajax请求

vue2.0之后,就不再对vue-resource更新,而是推荐使用axios 1. 安装 axios $ npm install axios 或 $ bower install axios 2. 在要使用的文件中引入axios import axios from 'axios' 3. 使用axios做请求 可以通过向 axios 传递相关配置来创建请求, 只有 url 是必需的.如果没有指定 method,请求将默认使用 get 方法. { // `url` 是用于请求的服务器 URL url

HTTP请求方法详解

HTTP请求方法详解 请求方法:指定了客户端想对指定的资源/服务器作何种操作 下面我们介绍HTTP/1.1中可用的请求方法: [GET:获取资源]     GET方法用来请求已被URI识别的资源.指定的资源经服务器端解析后返回响应内容(也就是说,如果请求的资源是文本,那就保持原样返回:如果是CGI[通用网关接口]那样的程序,则返回经过执行后的输出结果).     最常用于向服务器查询某些信息.必要时,可以将查询字符串参数追加到URL末尾,以便将信息发送给服务器.     使用GET请求时经常会发