Axios

最新推荐文章于 2024-01-16 10:19:31 发布

水流木—LJ

最新推荐文章于 2024-01-16 10:19:31 发布

阅读量41

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_39375532/article/details/130087967

版权

Axios

说明

默认情况下，axios将 JavaScript 对象序列化为 JSON

Axios ：vue前端开发时可能使用的一个模块，是一个基于 promise 的网络请求库，实现前后端交互。可以用于浏览器和 node.js
官方文档：https://www.axios-http.cn/docs/intro

1. 安装

npm install axios -S

2. 使用

不用配置和挂载，直接便可使用

（1）Get

1）Get方式一

// 导入
import Axios from "axios";

// 赋值
const axios = Axios;

function getUserFun(){
   axios.get("http://localhost:8081/getUser",{
      // 参数传递
      params: {
                "id": 112,
                "username": "Mike",
                "sex": "0",
                "address": "广东",
                "password": "123"
         }
      })
         .then((response)=> {
              // 处理成功情况
              console.log(response);
             	// this.user 为vue 中data()内数据
              Object.assign(this.user,response.data);           
          })
         .catch((error)=>{
             // 处理错误情况
             console.log(error);
          })
         .then(()=>{
                // 总是会执行

         })

 }

2）Get方式二

// 导入
import Axios from "axios";

// 赋值
const axios = Axios;

async function getUserFun(){
        const response = await axios.get("http://localhost:8081/getUser",{
                // 参数传递
                params: {
                 
                "id": 112,
                "username": "Mike",
                "sex": "0",
                "address": "广东",
                "password": "123"
                }
            })

        if(response != null){            
            // this.user 为vue 中data()内数据
            Object.assign(this.user,response.data);            
        }
        else{
            
        }


    }

3）Get请求方式三（推荐）

// 导入
import Axios from "axios";

// 赋值
const axios = Axios;


// method 改为 post，变为post方式请求    
function getUserFun2(){
                axios({
                    method: 'get',
                    url: 'http://localhost:8081/getUser',
                    params: {

                        "id": 112,
                        "username": "Mike",
                        "sex": "0",
                        "address": "广东",
                        "password": "123"

                    }

                })
                .then((response)=>{
                    // 处理成功情况
                    console.log(response);
                    // this.user 为vue 中data()内数据
                    Object.assign(this.user,response.data);
                    const time =  moment("Wed Jun 01 15:28:51 CST 2022").format("yyyy-MM-DD");

                    this.user.date =time;


                })

（2）Post

1）Post方式一

注意：post 方式后端必须在入参中加@RequestParams注解

// 导入
import Axios from "axios";

// 赋值
const axios = Axios;

function  getUserPost(){
		// 注意：post入参有三个，与get入参两个
        axios.post('http://localhost:8081/getUser', {},{
            params:{

                "id": 112,
                "username": "Mike",
                "sex": "0",
                "address": "广东",
                "password": "123"
            }

        })
            .then( (response) =>{
                console.log(response);
                window.alert(response.data.id);
                // this.user.id =response.data.id;
                Object.assign(this.user,response.data);
            })
            .catch((error)=> {
                console.log(error);
            })
            .then(()=>{
                // 总是会执行

            })

    }

2）Post方式二

注意：post 方式后端必须在入参中加@RequestParams注解

// 导入
import Axios from "axios";

// 赋值
const axios = Axios;

async function getUserPost(){
        const response = await axios.post("http://localhost:8081/getUser",
                 //  post 参数传递,参数不放于请求头
                 {
                "id": 112,
                "username": "Mike",
                "sex": "0",
                "address": "广东",
                "password": "123"
                },{
        		params:{
                    // 参数放于请求头
                	//  xxxx
                }
        })

        if(response != null){            
            // this.user 为vue 中data()内数据
            Object.assign(this.user,response.data);            
        }
        else{
            
        }


    }

3）Post请求方式三（推荐）

注意：post 方式后端必须在入参中加@RequestParams注解

// 导入
import Axios from "axios";

// 赋值
const axios = Axios;

// method 改为 get，变为get方式请求    
function getUserFun2(){
                axios({
                    method: 'post',
                    url: 'http://localhost:8081/getUser',
                    params: {

                        "id": 112,
                        "username": "Mike",
                        "sex": "0",
                        "address": "广东",
                        "password": "123"

                    }

                })
                .then((response)=>{
                    // 处理成功情况
                    console.log(response);
                    // this.user 为vue 中data()内数据
                    Object.assign(this.user,response.data);
                    const time =  moment("Wed Jun 01 15:28:51 CST 2022").format("yyyy-MM-DD");

                    this.user.date =time;


                })

（3）同步方式发送请求

axios默认异步方式发送请求

// 非异步方式
//  1. function 必须加 async。虽然 function本身便是异步但还是要加
//  2. 请求定义前加 await 表axios用非异步方式
async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

3. AxiosUtil（推荐）

对axios进行封装成util，通过util进行请求访问

（1）Util文件格式

文件名：request.js
位置：src/utils

import axios from 'axios';

const service = axios.create({
    // 来判断是否开发环境
    // process.env.NODE_ENV === 'development' ,

    // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
    // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
    //   默认值 'https://api.example.com'
    baseURL: 'http://localhost:8081',
    timeout: 5000

});

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
}, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
});

export default service;

（2）使用

//导入
import service from "../utils/request";

 function fun() {
        service({
            method: 'post',
            url: '/getUser',
            data: this.user
        })
            .then((response) => {
                Object.assign(this.user, response.data);
               
            })
            .catch((error) => {
            })
            .then(() => {

            })

    }

4. 其他

（1）数据undefined问题

问题：axios内获取vue数据undefined问题
解决方案1：将指向vue对象的tihs赋值给外部方法定义的属性，然后在内部方法中使用该属性

解决方案2：使用箭头函数

（2）对象赋值问题

注意：使用setup()组合式api开发风格，对象赋值用Object.assign(this.goods,response.data);
说明：使用vue2.x的开发方式（在methods属性内定义的函数调用axios），直接用this.goods = response.data便可。而对于组合式api开发方式，其只会修改模型层的数据，无法同步更新到视图层。因为会使数据的双向绑定失效（具体原因未知）

（3）日期格式类型问题

注意：前端最好用专业的时间选择器，不要用input，显示虽没问题，但用axios将input中日期数据发送值后端时会出问题

对象	日期格式	可处理的日期格式
javascript Date对象	Wed Jun 01 2022 11:41:09 GMT+0800 (中国标准时间)	均可处理
java Date对象	Wed Jun 01 15:40:54 CST 2022	均可处理
moment()	Wed Jun 01 2022 11:02:21 GMT+0800	均可处理

（4）两种参数发送方式

注意：后端springmvc接收post中data的参数，后端函数入参中加@RequestParams注解

方式	说明
参数存于params中发送	传递的参数放于请求头发送，get请求使用
参数存于data中发送	传递的参数不放于请求头发送，post请求使用。（post中也可params中发送，但不符合post方式的目的）