axios请求和axios常见的请求方式

已于 2023-08-30 10:08:11 修改
阅读量242 收藏
点赞数 1
文章标签： 前端 javascript 开发语言
于 2023-08-29 19:32:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_58447501/article/details/132563456
版权

1、axios请求下载和引入

1.1、下载指令

可以直接用下面指令或者也可以查看axios中文文档：axios中文文档|axios中文网 | axios (axios-js.com)
 

npm install axios

可以简写成 ：npm i axios

1.2、axios的引入方式

import axios from  "axios"

2、请求封装(最简单封装)

2.1axios二次封装

api封装一

import axios from 'axios'

const instance = axios.create({
    baseURL: "请求地址",
    timeout: 1000,            //请求时间、1000是一秒
  });
  instance.interceptors.request.use(config => {
				const token =localStorage.getItem('token') // 替换为你的 Token
				if (token) {
					config.headers.Authorization =token
				}
				return config;
			  });
  // 添加请求拦截器
  instance.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response.data;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

export default instance

api封装二

import http from "api封装一的路径"

export const log1 =()=>http.get("请求地址")
export const log2 =(params)=>http.post("请求地址",params)
export const log3 =(id)=>http.delete(`请求地址/${id}`,id)

页面用法

import {log1,log2,log3,log4,log5} from "api封装二的路径"

用法

不带参数
log1().then((res) => {
  console.log(res);
})

带参数
log2({id:1}).then((res) => {
  console.log(res);
})

log3(1).then((res) => {
  console.log(res);
})

2.2axios二次封装，ts封装方式、ts的class封装

api封装一

import axios from  "axios"
const config  = {
    baseURL:"请求地址",
    timeout: 1000,            //请求时间、1000是一秒
}

class Request{
     instance:any;
     constructor(configInfo:any){
       this.instance = axios.create(configInfo);

       this.instance.interceptors.request.use((config:any)=>{
        let token = localStorage.getItem("token");
        if(token){
          config.headers.Authorization = token
        }
         return config
       })
       this.instance.interceptors.response.use((res:any)=>{
        return res.data
       })
     }
     get(url:string,params={}){
         return this.instance.get(url,{params})
     }
     post(url:string,data:any){
         return this.instance.post(url,data)
     }
     put(url:string,data:any){
         return this.instance.put(url,data)
     }
     delete(url:string,data:any){
         return this.instance.delete(url,data)  
     }
}
export default new Request(config);

api封装二

import http from "api封装一";

export const log1 = () => http.get("请求地址");

interface Iuser {
  id: number;
  name: string
}
export const log2 = (params:Iuser) => http.post("请求地址", params);

export const log3 = (id:number,name:string) => http.put(`请求地址/${id}`,{name:name});

export const log4 = (id:number) => http.delete(`请求地址/${id}`,id);

页面用法

import {log1,log2,log3,log4} from "api封装二的路径"


用法

不带参数
log1().then((res) => {
  console.log(res);
})

带参数

post写法一
log2({id:1,name:"name的参数").then((res) => {
  console.log(res);
})

post写法二
let params={
    id:1,
    name:"name的参数"
}
log2(params).then((res) => {
  console.log(res);
})

log3(1,name的参数).then((res) => {
  console.log(res);
})

log4(1).then((res) => {
  console.log(res);
})

3、axios常见的请求方式

3.1、get请求，一般多用于获取数据(一般都是不带参数的)

方法一、

import axios from 'axios';             //引入axios请求

//不带参数
axios.get('请求地址').then(res => {
    console.log(res);
})

//带参数,params是携带的参数
//方法一
axios.get('请求地址',{params:{id:1}}).then(res => {
   console.log(res);
})

//方法二
axios.get('请求地址',{id:1}).then(res => {
   console.log(res);
})

方法二、

        二次封装的写法，login只是一个名字这个可以自定义的

不带参数
export const login= (params) => http.get("请求地址");

带参数
方法一、
export const login = (params) => http.get("请求地址", params);

方法二、
export const login = (params) => http.get("请求地址", {id:1});

ts版
interface log {
  id: number;
}
export const login = (params:log) => http.get("请求地址", params);

3.2、post请求，主要提交表单数据和上传文件(一般都是携带参数的)

 方法一、

import axios from 'axios';             //引入axios请求

//不带参数
axios.post('请求地址').then(res => {
    console.log(res);
})

//带参数,params是携带的参数
//方法一
axios.post('请求地址',{params:{id:1}}).then(res => {
   console.log(res);
})

//方法二
axios.post('请求地址',{id:1}).then(res => {
   console.log(res);
})

方法二、

        二次封装的写法，login只是一个名字这个可以自定义的

不带参数
export const login= (params) => http.post("请求地址");

带参数
方法一、
export const login = (params) => http.post("请求地址", params);

方法二、
export const login = (params) => http.post("请求地址", {id:1});

ts版
interface log {
  id: number;
}
export const login = (params:log) => http.get("请求地址", params);

3.3、put请求，对数据全部进行更新(该请求和post类似，只是请求方法不同)

 方法一、

import axios from 'axios';             //引入axios请求

//不带参数
axios.put('请求地址').then(res => {
    console.log(res);
})

//带参数,params是携带的参数
//方法一
axios.put('请求地址',{params:{id:1}}).then(res => {
   console.log(res);
})

//方法二
axios.put('请求地址',{id:1}).then(res => {
   console.log(res);
})

方法二、

        二次封装的写法，login只是一个名字这个可以自定义的

不带参数
export const login= (params) => http.put("请求地址");

带参数
方法一、
export const login = (params) => http.put("请求地址", params);

方法二、
export const login = (params) => http.put("请求地址", {id:1});

ts版
export const login= (id:number,name:string) => http.put(`请求地址/${id}`,{name:name});

3.4、patch请求，只对更改过的数据进行更新(该请求和post类似，只是请求方法不同)

 方法一、

import axios from 'axios';             //引入axios请求

//不带参数
axios.get('请求地址').then(res => {
    console.log(res);
})

//带参数,params是携带的参数
//方法一
axios.get('请求地址',{params:{id:1}}).then(res => {
   console.log(res);
})

//方法二
axios.get('请求地址',{id:1}).then(res => {
   console.log(res);
})

方法二、

        二次封装的写法，login只是一个名字这个可以自定义的

不带参数
export const login= (params) => http.patch("请求地址");

带参数
方法一、
export const login = (params) => http.patch("请求地址", params);

方法二、
export const login = (params) => http.patch("请求地址", {id:1});

ts版
interface log {
  id: number;
}
export const login = (params:log) => http.patch("请求地址", params);

3.5、delete请求，删除请求(参数可以放在url上也可以和post一样放在请求体中)

 方法一、

import axios from 'axios';             //引入axios请求

//不带参数
axios.delete('请求地址').then(res => {
    console.log(res);
})

//带参数,id是携带的参数
//方法一
axios.delete('请求地址',{params:{id:1}}).then(res => {
   console.log(res);
})

//方法二
axios.delete('请求地址',{id:1}).then(res => {
   console.log(res);
})

//方法三
axios.delete(`请求地址/?id=`+id).then(res => {
   console.log(res);
})

方法二、

        二次封装的写法，login只是一个名字这个可以自定义的

不带参数
export const login= () => http.delete("请求地址/id");

带参数
方法一、
export const login = (id) => http.delete("请求地址/id",id);

方法二、
export const login = (id) => http.delete("请求地址/?id="+id);

方法三，绑定到接口上、
export const login = (id) => http.delete(`请求地址/${id}`,id);

ts版
export const login = (id:number) => http.delete(`请求地址/${id}`,id);

4、常用的几种URL参数的拼接方法

1、单个参数
let id=1

url:"路径/?id="+id

url:`路径/${id}`

2、多个参数要用到这个“ `` ”和&这个隔开,不能穿汉字
let id=1
let name="canshu"

url:`路径/?id=${id}&name=${name}`    //多个参数用&隔开

3、全动态拼接
不带参数的
let ipaddr = "192.162.1";
let path = "/user/index";
let url   = "http://" + ipaddr +path ;
console.log(url);// http://192.168.1/user/index"

带参数的
let ipaddr = "192.162.1.1.....";
let path = "/arrg/box";
let getTimestamps = new Date().getTime();
let url = "http://" + ipaddr + path + "?timestamps=" + getTimestamps;
console.log(url);

使用问号和与号拼接参数：
var loadsrc = $(this).attr('href');
var companyId = $(this).attr('companyId');
var companyName = $(this).text();
window.location.href = loadsrc + '?companyid=' + companyId + '&companyName=' + companyName;

5、axios状态码大全里面还包含了js基础下面链接

 HTTP状态码大全 - 常用参考表对照表 - 脚本之家在线工具 (jb51.net)

小 汐
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
vue axios封装 axios 请求
03-27
vue axios封装 axios 请求
axios入门——常用五种请求方法介绍（get、post、put、patch、delete）
热门推荐
艾丽的博客
01-18 1万+
写在前面 axios中文说明 为方便起见，axios为所有支持的请求方法提供了别名 params 是将与请求一起发送的 URL 参数，对应后台中的query data 是作为请求主体被发送的数据，对应后台中的body axios.request(config) axios.get(url[, config]) // 只支持 params 传参 axios.delete(url[, config]) // 只支持 params传参 axios.head(url[, config]) // 只支持 para
axios发送请求的五种方法详解
最新发布
m0_59335810的博客
03-11 1565
2、Content-Type: multipart/form-data （用以支持向服务器发送二进制数据，多用于文件上传，multipart/form-data不会对参数编码，使用的boundary(分割线)，相当于&，boundary的值是----Web******）3、Content-Type: application/x-www-form-urlencoded （提交的默认方式，参数都是通过浏览器的url传递，都是以key=&value=的方式写在url后面）// 方式一:参数在url。
axios的各种请求方法
weixin_42289273的博客
09-20 516
/ 创建一个图片URL，用于显示图片。// 可以通过向axios传递相关配置来创建请求。// 取消请求（message 参数是可选的）// 使用cancel token取消请求。// 创建实例时设置默认的配置。// 通过params添加参数。// 在实例创建后修改默认值。// 在发送请求之前做些什么。// 对响应数据做点什么。// 直接url添加参数。"对响应数据做了处理"// 一次发送多个请求。// 001-请求图片。// 添加请求拦截器。// 及简get请求。"状态码不是2xx"
axios请求五种方法
weixin_30483697的博客
09-08 659
一、介绍 Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 可以提供以下服务: 1、从浏览器中创建XMLHttpRequests 2、从node.js创建http请求 3、支持PromiseAPI 4、拦截请求和响应 5、转换请求数据和响应数据 6、取消请求 7、自动转换JSON数据 8、客户端支持防御XSRF 二:使...
axios发送请求几种方式
lotte
11-23 1万+
import 'axios' // get传参数 axios.get('/user?id=123') .then(response=> { console.log(response) }) .catch(error=> { console.log(error) }); // get传参数 axios.get('/getuser', { params: { ID: 123 } }) .then(response=> { ...
使用axios请求时,发送formData请求的示例
10-16
今天小编就为大家分享一篇使用axios请求时,发送formData请求的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
axios请求的封装
12-15
axios请求的封装，在工程的src目录下面，新建一个文件夹lib，将该文件复制到lib文件夹下，并在main.js中设置为全局引用，例：在main.js中添加：import Extend from './lib/http'，Extend(Vue.prototype)，另外...
vue axios请求超时的正确处理方法
08-27
主要介绍了vue axios请求超时,设置重新请求的完美解决方法,一并给大家介绍了axios基本用法，需要的朋友可以参考下
vue axios请求拦截实例代码
10-18
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端.这篇文章主要介绍了vue/axios请求拦截的相关知识,需要的朋友可以参考下
VUE项目axios请求头更改Content-Type操作
10-15
主要介绍了VUE项目axios请求头更改Content-Type操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
axios请求
barbed的博客
10-01 84
axios 默认发json格式数据 1、 get 参数带在params:{} 2、 post 参数带在data:{} 发表单格式：发表单数据就行，qs转数据就行 发json格式： 发js对象，不用转换，axios帮忙转换 get请求 axios({ url: '', method: 'get', // get 带参，参数带在params上 get请求不用设置请求头 params: { }, }) post请求 axios({ url:
axios数据请求
qq_56632239的博客
05-04 455
axios底层对象是xhr。delete 删除。
axios请求方式别名
08-15
回答: axios为常用的请求方法提供了别名，包括axios.get()、axios.post()、axios.put()、axios.patch()和axios.delete()。这些别名的作用是为了简化开发者的使用过程，使发起请求变得更加方便和快捷。另外，常用的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

小 汐

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

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

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

打赏作者

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

抵扣说明：

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

余额充值