axios使用和配置封装

1.官网获取axios中文网|axios API 中文文档 | axios三种方法随意一种都可以，我这使用的是第三种2.引用axios<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-w

my陈

178人浏览 · 2021-10-28 10:55:49

my陈 · 2021-10-28 10:55:49 发布

1.官网获取axios中文网|axios API 中文文档 | axios

三种方法随意一种都可以，我这使用的是第三种

2.引用axios

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="axios.js"></script>
  </body>
</html>

3.封装axios配置

新建一个js文件，写入如下配置：

//使用自定义配置
const request = axios.create({
  baseURL: 'http://localhost:8080', //url前缀或者说是主机地址
  timeout: 1000, //超时时间
  headers: { token: 'ChenHaiTao' }, //携带令牌
})

4.使用axios访问后台接口

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="axios.js"></script>
    <script src="./axios配置文件.js"></script>
    <script>
      //基于promise请求数据
      axios({
        method: 'get',
        url: 'http://localhost:8080/user/list',
      })
        //请求成功回调方法
        .then((response) => {
          console.log('基于promise获取数据成功', response)
        })
        //请求失败回调方法
        .catch((error) => {
          console.log('基于promise获取数据失败', error)
        })

      //基于promise另一种写法请求数据
      axios
        .get('http://localhost:8080/user/list')
        //请求成功回调方法
        .then((response) => {
          console.log('基于promise另一种写法获取数据成功', response)
        })
        //请求失败回调方法
        .catch((error) => {
          console.log('基于promise另一种写法获取数据失败1', error)
        })
      //使用配置文件配置请求数据
      request({
        method: 'get',
        url: '/user/list',
      })
        //请求成功回调方法
        .then((response) => {
          console.log('使用配置文件配置获取数据成功', response)
        })
        //请求失败回调方法
        .catch((error) => {
          console.log('使用配置文件配置获取数据失败', error)
        })
    </script>
  </body>
</html>

5.编写后台代码（简略）

@RestController
@RequestMapping("/user")
@CrossOrigin//解决跨域
public class UserController {
    @Resource
    private UserService userService;
    @GetMapping("/list")
    public List<User> list(){
        return userService.list() ;
    }
}

6.测试接口

7.可能会出现的问题

Access to XMLHttpRequest at 'http://localhost:8080/user/list' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

没有跨域：什么是跨域？如何实现？ - 简书解决的方法有许多找自己合适的就可以。

华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐