axios

最新推荐文章于 2023-06-27 16:08:44 发布

ILove_bugs

最新推荐文章于 2023-06-27 16:08:44 发布

阅读量663

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/ILove_bugs/article/details/121684111

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一.axios简介

网址:axios中文网|axios API 中文文档 | axios

axios是一个基于Promise的http库,支持浏览器端和node.js端

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

二.安装及配置

npm i axios -S

三.跨域

只要前端向服务器发ajax请求，大概会发生跨域。

很多种方案触发：99%都是后端解决的。

cors 后端
修改服务器代理配置
jsonp(用的很少)

四.配置代理解决跨域: 仅是开发阶段而已

项目目录中u-shop/vue.config.js文件，这是vue脚手架的配置文件

module.exports = {
    //设置代理请求
    devServer:{
        proxy:{
            "/api":{
                target:"http://localhost:3000",//目标地址
                "^/api":""
                }
            }
        }
}

 //设置代理请求  同一个项目配置多个地址
module.exports = {
   
    devServer: {
        proxy: {
            "/api1": { // 这是以/api开头的
                target: "http://localhost:3000",//目标地址 ，vue脚手架会帮我们转发到这个地址
                pathRewrite: {
                    '^/api1': '/apiv1'   // 这种接口配置出来     http://XX.XX.XX.XX:3000/api/login
                }
            },
            "/api2": { // 这是以/api开头的
                target: "http://localhost:3000",//目标地址 ，vue脚手架会帮我们转发到这个地址
                pathRewrite: {
                    '^/api2': '/apiv2'   // 这种接口配置出来     http://XX.XX.XX.XX:3000/api/login
                }
            }
        }
    }
}

//一个项目中只有一个接口地址
module.exports = {
    //设置代理请求
    devServer: {
        proxy: {
            "/api": { // 这是以/api开头的
                target: "http://localhost:3000",//目标地址 ，vue脚手架会帮我们转发到这个地址
                
            }
        }
    }
}

重启项目: npm run serve

五.axios请求方式

get方式

axios.get( url?key=value ) 
axios.get( url ,{ params:{  } } ) 

axios.get("http://localhost:3000/api/getcates")
        .then(function(response) { //成功的回调
          console.log(response,'ok');
            //接口返回的数据在 response.data中。因为axios库把返回数据和请求的数据进行了二次包装
        })
        .catch(function(error) { //失败的回调
          console.log(error);
        });

post方式

axio.post( url,{ 参数 } )
let result = await axios.post(api_url + "/api/register",{ phone:'15811111112',password:'123456',nickname:'鲁班' });

axios

let result = await axios({
        url: api_url + "/api/getgoodsinfo",
        method: "get",
        params: {
          //parmas是axios方法决定的
          id: 2 //这个参数是根据后端的接口文档来的
        }
      });

post

let result = await axios({
        url: api_url + "/api/register",
        method: "post",
        data: {
          phone: "15811111113",
          password: "123456",
          nickname: "鲁班小号"
        }
      });

返回结果的解释

{
    config,前端发送ajax的请求头相关的所有配置信息
    data,接口返回的内容
    headers,如果需要设置请求头需要在这里设置，{ authorization:token字符串 }
    status,状态码
    statusText,状态码对应描述
    request,原生ajax的内容
}

baseURL

六.axios的基本应用

6-1get请求

局部引入

在某一个具体的.vue页面中引入axios

全局引入

在main.js中引入axios挂载到Vue的原型链上


import axios from 'axios'
Vue.prototype.$axios = axios

在其它.vue页面可以通过this实例访问到 $axios方法。this.$axios 
async request1(){
    // console.log( this.$axios )
    let result = await this.$axios({
        url: api_url + "/api/getgoodsinfo",
        method: "get",
        params: {
            //parmas是axios方法决定的
            id: 2 //这个参数是根据后端的接口文档来的
        }
    });
    console.log(result, "$axios");
}

全局默认设置

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

6-2.post请求

七.axios.create() 了解

axios() 其实就是一个http请求的实例对象

axios.create可以用来自定义axios请求，相当于我们又封装了一个ajax方法

let http = axios.create({
  baseURL: "http://localhost:3000"
});


http({
        url: "/api/getgoodsinfo",
        method: "get",
        params: {
          //parmas是axios方法决定的
          id: 2 //这个参数是根据后端的接口文档来的
        }
      })

八.执行多个并发请求

 function getCates() {
        return axios.get(api_url + '/api/getcates');
      }

function getBanner() {
    return axios.get(  api_url + '/api/getbanner' );
}

axios.all( [getCates(), getBanner()] )
    .then(axios.spread( (cates, banner)=> {
    // 两个请求现在都执行完成
    console.log( cates, banner,'----多并发' )
}));

九.axios拦截器

总结：统一加些操作。比如：

每次打印一上请求地址、响应的结果

每次请求统一加上token

请求拦截器

// 请求拦截器
axios.interceptors.request.use(config=>{
 
  return config
})

<template>
  <div>
      <h2>拦截器</h2>
      <button @click="request1">发送请求</button>
  </div>
</template>

<script>
import axios from 'axios'

let api_url = 'http://localhost:3000'
//1. 响应拦截
axios.interceptors.response.use( res=>{
  //console.log(res,'响应拦截')
  console.group('-------------------------')
  console.log('本次请求地址为:' ,res.config.url)
  console.log('本次结果为：',res.data)
  console.groupEnd('-----')
    return res //否则后面拿不到结果
}  )

//2. 请求拦截，可以统一设置请求的参数，比如统一在headers中加token
  //假设后端的所有接口要求 前端必须通过headers传递一个aa参数为123
axios.interceptors.request.use( config=>{
  // console.log(config,'请求拦截')
  //config.headers.aa = 1234
  config.headers.authorization = 'tokenstring' //登录成功后设置了token字符串到locastorage，从缓存中获取的
  return config  //必须return，否则请求信息不会发送给服务器
} )

export default {
    methods:{
      async request1(){
          let result = await axios.get(api_url + '/api/getcates');
          //console.log(result,'request1触发了')
      },
      async request2(){

      }
    }
}
</script>

<style>

</style>

响应拦截器

// 响应拦截器
axios.interceptors.response.use(res=>{
    return res
})

axios.interceptors.response.use( res=>{
  // console.log(res,'响应拦截')
  console.group('-------------------------')
  console.log('本次请求地址为:' ,res.config.url)
  console.log('本次结果为：',res.data)
  console.groupEnd('-----')
    return res //否则后面拿不到结果
}  )

十.请求层的封装

get请求

let reqGet =(url,params={})=>{

return axios.get(url,{params})

}

封装post 请求

let reqPost =(url,params={})=>{

return axios.post(url,params)

}

ILove_bugs

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
axios

一.axios简介网址:axios中文网|axios API 中文文档 | axiosaxios是一个基于Promise的http库,支持浏览器端和node.js端从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求支持 Promise API 拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客户端支持防御 XSRF 二.安装及配置 npm
复制链接

扫一扫