Axios

sixkey大约 5 分钟

Axios

1、CDN方式引入

<body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</body>

2、axios基本使用

默认是get请求

注意：get请求无请求体，可以有body,但是不建议带

使用get方式进行无参请求

<script>
    axios({
        url:'http://localhost:8080/get/getAll',
        method:'get'
    }).then(res=>{
        console.log(res.data.data)
    })
</script>

@GetMapping("/get/getAll")
    public ResResult getAllUser(){
        List<User> list = userService.list();
        return ResResult.okResult(list);
    }

使用get方式请求，参数值直接放在路径中

<script>
    axios({
        url:'http://localhost:8080/get/1',
        method:'get'
    }).then(res=>{
        console.log(res.data.data)
    })
</script>

后端接口
@GetMapping("/get/{id}")
public ResResult getUserById(@PathVariable("id") Long id){
        User user = userService.getById(id);
        return ResResult.okResult(user);
}

使用get方式请求，参数拼接在路径中：方式①

<script>
    axios({
        url:'http://localhost:8080/get?id=1',
        method:'get'
    }).then(res=>{
        console.log(res.data.data)
    })
</script>

后端接口
@GetMapping("/get")
    public ResResult getUserByIds(@RequestParam("id") Long id){
        User user = userService.getById(id);
        return ResResult.okResult(user);
}

使用get方式请求，参数拼接在路径中：方式②

<script>
    axios({
        url:'http://localhost:8080/get',
        params:{
            id:'2'
        },
        method:'get'
    }).then(res=>{
        console.log(res.data.data)
    })
</script>

后端接口
@GetMapping("/get")
    public ResResult getUserByIds(@RequestParam("id") Long id){
        User user = userService.getById(id);
        return ResResult.okResult(user);
}

使用get方式请求，拼接多个参数在路径中：方式③

<script>
    axios({
        url:'http://localhost:8080/get',
        params:{
            id:'2',
            username:'swx'
        },
        method:'get'
    }).then(res=>{
        console.log(res.data.data)
    })
</script>

后端接口
@GetMapping("/get")
    public ResResult getUserByIds(@RequestParam("id") Long id,@RequestParam("username") String username){
        LambdaQueryWrapper<User> wrapper = new LambdaQueryWrapper<>();
        wrapper.eq(User::getUsername,username);
        wrapper.eq(User::getId,id);
        User user = userService.getOne(wrapper);
        return ResResult.okResult(user);
 }

注意：post的有参、无参请求跟get一样，请求方式换一下即可

特别

post请求接收json格式数据

<script>
    axios({
        url:'http://localhost:8080/post/test',
        data:{
            'username':'swx'
        },
        method:'post'
    }).then(res=>{
        console.log(res.data.data)
    })
</script>

后端接口
@PostMapping("/post/test")
    public ResResult getUserByIdPostTest(@RequestBody User user){
        LambdaQueryWrapper<User> wrapper = new LambdaQueryWrapper<>();
        wrapper.eq(User::getUsername,user.getUsername());
        User users = userService.getOne(wrapper);
        return ResResult.okResult(users);
    }

3、请求简写方式&请求失败处理

get无参请求

<script>
    axios.get('http://localhost:8080/get/getAll').then(res=>{
        console.log(res.data.data)
    }).catch(err=>{
        console.log('timeout')
        console.log(err)
    })
</script>

get有参请求,post方式不可以这样请求

<script>
    axios.get('http://localhost:8080/get',{params:{id:'2',username:'swx'}}).then(res=>{
        console.log(res.data.data)
    }).catch(err=>{
        console.log('timeout')
        console.log(err)
    })
</script>

post有参请求，以json格式请求

<script>
    axios.post('http://localhost:8080/post',"id=2&username=swx").then(res=>{
        console.log(res.data.data)
    }).catch(err=>{
        console.log('timeout')
        console.log(err)
    })
</script>


也可以一下方式，但是后端要加@RequestBody注解
<script>
    axios.post('http://localhost:8080/post/test',{username:'swx'}).then(res=>{
        console.log(res.data.data)
    }).catch(err=>{
        console.log('timeout')
        console.log(err)
    })
</script>

4、axios并发请求

方式1

<script>
    axios.all([
        axios.get('http://localhost:8080/get/getAll'),
        axios.get('http://localhost:8080/get/get',{params:{id:'1'}})
    ]).then(res=>{
        //返回的是数组，请求成功返回的数组
        console.log(res[0].data.data),
        console.log(res[1].data.data)
    }).catch(err=>{
        console.log(err)
    })
</script>

后端接口
@GetMapping("/get/getAll")
    public ResResult getAllUser(){
        List<User> list = userService.list();
        return ResResult.okResult(list);
    }

@GetMapping("/get/get")
    public ResResult getUserByIdt(@RequestParam("id") Long id){
        User user = userService.getById(id);
        return ResResult.okResult(user);
    }

方式2：使用spread方法处理返回的数组

<script>
    axios.all([
        axios.get('http://localhost:8080/get/getAll'),
        axios.get('http://localhost:8080/get/get',{params:{id:'1'}})
    ]).then(
        //高端一些
        axios.spread((res1,res2)=>{
            console.log(res1.data.data),
            console.log(res2.data.data)
        })
    ).catch(err=>{
        console.log(err)
    })
</script>

5、axios全局配置

<script>
    axios.defaults.baseURL='http://localhost:8080'; //全局配置属性
    axios.defaults.timeout=5000; //设置超时时间

    //发送请求
    axios.get('get/getAll').then(res=>{
        console.log(res.data.data)
    });

    axios.post('post/getAll').then(res=>{
        console.log(res.data.data)
    });
</script>

6、axios实例

<script>
    //创建实例
    let request = axios.create({
        baseURL:'http://localhost:8080',
        timeout:5000
    });
    //使用实例
    request({
        url:'get/getAll'
    }).then(res=>{
        console.log(res.data.data)
    });

    request({
        url:'post/getAll',
        method:'post'
    }).then(res=>{
        console.log(res.data.data)
    })
</script>

7、axios拦截器

axios提供了两大类拦截器：一种是请求方向的拦截（成功的、失败的）；
一种是响应方向的拦截（成功的，失败的）

拦截器作用：比如：请求之前在请求头加token、强制登录；
响应的时候可以进行相应的数据处理

请求拦截器

<script>
    //创建实例
    let request = axios.create({
        baseURL:'http://localhost:8080',
        timeout:5000
    });

    //配置axios拦截器
    request.interceptors.request.use(config=>{
        console.log("请求进来了...")
        console.log("请求成功方向")
        console.log(config.data.data)
        //放行请求，这一步很重要，否则报错
        return config;
    },err=>{
        console.log("请求进来了...")
        console.log("请求失败方向")
        console.log(err)
    });

    //如果没有创建实例，则使用以下方式
    //配置axios拦截器
    // axios.interceptors.request.use(config=>{
    //     console.log("请求进来了...")
    //     console.log("请求成功方向")
    //     console.log(config)
    //     //放行请求
    //     return config;
    // },err=>{
    //     console.log("请求进来了...")
    //     console.log("请求失败方向")
    //     console.log(err)
    // });

    //使用实例
    request({
        url:'get/getAll'
    }).then(res=>{
        console.log(res.data.data)
    });
</script>

响应拦截器

<script>
    //创建实例
    let request = axios.create({
        baseURL:'http://localhost:8080',
        timeout:5000
    });

    //配置axios拦截器
    request.interceptors.response.use(config=>{
        console.log("响应进来了...")
        console.log("响应成功方向")
        console.log(config.data.data)
        //放行响应
        return config;
    },err=>{
        console.log("响应进来了...")
        console.log("响应失败方向")
        console.log(err)
    });

    //使用实例
    request({
        url:'get/getAll'
    }).then(res=>{
        console.log(res.data.data)
    });
</script>

8、vue中封装axios

封装在request.js中

//导入axios
import axios from 'axios'

//创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
})


//请求拦截器
service.interceptors.request.use(
  config => {

    if (store.getters.token) {
      config.headers['token'] = getToken()
    }
    //放行请求
    return config
  },
  error => {
    console.log(error)
    return Promise.reject(error)
  }
)


//响应拦截器
service.interceptors.response.use(
  response => {
	//返回的数据
    const res = response.data

    if (res.code !== 200) {
      Message({
        message: res.message || 'Error',
        type: 'error',
        duration: 5 * 1000
      })

      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
        // to re-login
        MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
          confirmButtonText: 'Re-Login',
          cancelButtonText: 'Cancel',
          type: 'warning'
        }).then(() => {
          store.dispatch('user/resetToken').then(() => {
            location.reload()
          })
        })
      }
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service

哪个模块需要发送请求直接引入即可，将以上实例导入

比如：此模块的所有请求接口：api下的skuInfo.js

//导入axios实例
const api_name = '/admin/product/skuInfo'

export default {

  getPageList(page, limit, searchObj) {
    return request({
      url: `${api_name}/${page}/${limit}`,
      method: 'get',
      params: searchObj
    })
  },

  save(role) {
    return request({
      url: `${api_name}/save`,
      method: 'post',
      data: role
    })
  },

  //新人专享
  isNewPerson(id, status) {
    return request({
      url: `${api_name}/isNewPerson/${id}/${status}`,
      method: 'get'
    })
  },
}

list.vue页面中使用

//先导入
import api from '@/api/product/skuInfo'

api.getPageList(this.page, this.limit, this.searchObj).then(
        response => {
          debugger
          this.list = response.data.records
          this.total = response.data.total

          // 数据加载并绑定成功
          this.listLoading = false
        }
      )
    }

api.save(this.skuInfo).then(response => {
        if (response.code) {
          this.$message({
            type: 'success',
            message: response.message
          })
          this.$router.push({ path: '/product/skuInfo/list' })
          this.saveBtnDisabled = false
        }
      })

//新人专享
handleNewPersonChange(index, row) {
      api.isNewPerson(row.id, row.isNewPerson).then(response => {
        this.$message({
          type: 'info',
          message: '操作成功'
        })
        this.fetchData()
      })
    }
  }

main.js中引入使用

import * as API from '@/api'

Vue.prototype.$API = API