← 返回首页
Vue-cli3基础教程(十)
发表时间:2021-05-14 17:33:39
使用axios

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: - 从浏览器中创建 XMLHttpRequest - 从 node.js 发出 http 请求 - 支持 Promise API - 拦截请求和响应 - 转换请求和响应数据 - 取消请求 - 自动转换JSON数据 - 客户端支持防止 CSRF/XSRF

在vue项目中引入axios步骤如下:

1.本地安装axios依赖

npm install axios -S
//或者
yarn add axios -S

2.封装axios 在util目录下,新建request.js

import axios from 'axios' //引入 axios

// 创建 axios 实例
const request = axios.create({
    baseURL: 'http://localhost:8088/springbootdemo', //后端接口地址
    timeout: 60000, // 请求超时时间
})

export default request

3.在视图组件中使用axios调用后端接口

<script>

   import request from "@/util/request";

   ...
   export default {
      name: "MyLogin",
      methods:{
         doLogin(){
   //测试调用后台服务器接口,完成地址就是:http://localhost:8088/springbootdemo/users/auth
               request.get('/users/auth',{
                    params:{
                        username:'admin',
                        password:'123456'
                    }
                }).then(resp=>{
                    console.log(resp);
               }).catch(err=>{
                    console.log(err);
               })
         }
      }
   }
</script>