Axios请求

2022-09-05 23:30:26 阅读：182 来源： 互联网

标签：function Axios console 请求 re axios data log

GET请求

//Get请求
axios.get("http://127.0.0.1:8090/data").then(function (ret){
    console.log(ret);
    console.log(ret.data);
    console.log(ret.status);
    console.log(ret.statusText)
})

GET传值

方法一

//Get请求传参数1
axios.get("http://127.0.0.1:8090/data3?id=13").then(function (ret){
    console.log("25: "+ret.data);
})

方法二

//Get请求传参数2
axios.get("http://127.0.0.1:8090/data3",{params:{
    id:937
}}).then(function (ret){
    console.log("32: "+ret.data);
})

POST传值

方法一

//Post请求传参数1
axios.post("http://127.0.0.1:8090/data4",{
    user:'李四',
    pwd:'12345'
}).then(function(ret){
    console.log("45: "+ret.data);
})

方法二

//Post请求传参数2
var params=new URLSearchParams();
params.append('user','李思2');
params.append('pwd','xyh1212');
axios.post("http://127.0.0.1:8090/data4",params).then(function(ret){
    console.log("53: "+ret.data);
})

delete路径传值

//路径参数 传值
axios.delete("http://127.0.0.1:8090/data5/id=2022").then(function(re){
    console.log("37: "+re.data);
})

Put请求发送数据

var cf={name:"李四",age:19};
axios.put("http://127.0.0.1:8090/data6",{
    name:'历史',
    age:89
}).then(function(re){
    //输出JSON的信息
    console.log("62: "+re.data.name+" "+re.data.age);
})

服务器发送JSON

//服务器发送JSON
axios.get("http://127.0.0.1:8090/json").then(function(re){
    console.log(re);
    console.log("69:"+ re.data.username+" "+re.data.age)
})

优化URL

//定义在最前面即可
axios.defaults.baseURL="http://127.0.0.1:8090";
//服务器发送JSON
axios.get("json").then(function(re){
    console.log(re);
    console.log("16:"+ re.data.username+" "+re.data.age)
})

添加请求头

//请求头 Token 用all的可以要加 token ==>res.header("Access-Control-Allow-Headers","token");
axios.defaults.headers['token']="JWT Token1728y871271tt163tt131738118";
axios.get("json").then(function(re){
    console.log(re);
    console.log("23:"+ re.data.username+" "+re.data.age)
})

NodeJS获取请求头

//发送JOSN
app.get("/json",function (req,res){
    //发送JSON
    res.json({
        username:'李四',
        age:19,
        sex:'男'
    })
    console.log("56:"+req.headers.token);
})

拦截器

请求拦截器

每个地址都要经过这个拦截器

axios.defaults.baseURL="http://127.0.0.1:8090"
//请求拦截器
//所有的地址都会经过了拦截器
axios.interceptors.request.use(function (config){
    //成功
    console.log(config);
    //给所有的请求加 Token
    config.headers.token = "JWT Token1728y871271tt163tt131738118";
    console.log("URL："+config.url);//通过URL判断是否登入 设置Token
    //放行
    return config;//相当于放行 不return就是阻止
},function (er){
    //错误
    console.log(er);
})
axios.get("json").then(function(re){
    console.log(re);
    console.log("33:"+ re.data.username+" "+re.data.age)
})

响应拦截器

默认数据返回是在JSON中可以在响应中返回改变后的数据直接返回data里面的数据

//响应拦截器(响应之前先改变) res服务器返回的结果
axios.interceptors.response.use(function (res){
    console.log(res);
    //返回服务器的data信息 请求返回的就直接是data 不需要再.data
    return res.data;
},function (er){
    console.log(er);
})

axios.get('data').then(function (re){
    console.log("50: "+re);
})

配合await使用

axios.defaults.baseURL="http://127.0.0.1:8090";
//响应拦截器 直接返回 结果的data
axios.interceptors.response.use(function (res){
    return res.data;
},function (error){
    console.log(error);
})

//axios 配合 await  await必须和 async的函数使用
async function test(){
    let t1=await axios.get("data")
    console.log(t1);
    let t2=await axios.get("data2");
    console.log(t2);
}
test();

抓取异常

axios.get('data').then(function (re){
    console.log("50: "+re);
}).catch(function(er){
  console.log(er);
})

创建实例

const instance = axios.create({
  //基准路径
  baseURL: 'https://some-domain.com/api/',
  //超时时间
  timeout: 1000,
  //请求头
  headers: {'X-Custom-Header': 'foobar'}
});

//请求
instance.get('xx').then((res)=>{
  
})

标签：function,Axios,console,请求,re,axios,data,log
来源： https://www.cnblogs.com/xyhghy/p/16660056.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9