axios数据请求

最新推荐文章于 2023-03-26 11:30:00 发布
最新推荐文章于 2023-03-26 11:30:00 发布
阅读量134 收藏 1
点赞数
原文链接：https://blog.csdn.net/qq_45669178/article/details/105921842?utm_source=app
版权

axios
一、数据请求封装
1、回调函数的方法
2、关于promise的方法
二、拦截器
三、axios登录的请求写法
四、请求报错的解决方法
五、axios数据请求封装
一、数据请求封装
注：下载axios
npm install --save axios

1、回调函数的方法
1）在src——>api——>request.js

// 引入
import axios from 'axios';
// 对其进行暴露(让其在外面传入；  success，failure他俩都是参数    success是一个函数，failure他也是一个函数   然后都可以回调出去   )
export function request(config,success, failure){
    // 1、创建实例，不要创建全局的
    const instance = axios.create({
        baseURL:"http://123.207.32.32:8000/api/h8",
        timeout:5000//这个是5秒的意思
    })


    // 发送网络请求( res 这个是一个参数的时候，不用加括号，是俩参数的时候，记得加一个圆括号)
    instance(config)
    .then(res=>{
        // console.log(res);
        // 在这块给它回调出去
        success(res);
    })
    .catch(err=>{
        // console.log(err)
        // 回调出去
        failure(err);
    })
}

2)使用

<template>
  <div>
   
  </div>
</template>

<script>
import {request} from '@/api/request';
export default {
  name: 'App',
  components: {
    
  },
  created() {
	request({
	  url:'/home/multidata'
	},res=>{
	  console.log(res);
	},err=>{
	  console.log(err);
	})
  },
}
</script>
<style>
</style>

2、关于promise的方法
1）不简写的写法
①在src——>api——>request.js

import axios from 'axios';
export function request(config){
    return new Promise((resolve,reject)=>{
        // 1、创建实例，不要创建全局的
        const instance = axios.create({
            baseURL:"http://123.207.32.32:8000/api/h8",
            timeout:5000//这个是5秒的意思
        })
        // 发送网络请求( res 这个是一个参数的时候，不用加括号，是俩参数的时候，记得加一个圆括号)
        instance(config)
        .then(res=>{
            resolve(res);
        })
        .catch(err=>{
            reject(err);
        })
    })
}

②使用

<template>
  <div>
   
  </div>
</template>
<script>
import {request} from '@/api/request';
export default {
  name: 'App',
  // 这个是组件的调用
  components: {

  },
  created() {
    request({
      url:'/home/multidata'
    }).then(res=>{
      console.log(res);
    }).catch(err=>{
      console.log(err);
    })
  },
}
</script>
<style>
</style>

2）简写的写法
①在src——>api——>request.js

import axios from 'axios';
// 对其进行暴露(让其在外面传入；  success，failure他俩都是参数    success是一个函数，failure他也是一个函数   然后都可以回调出去   )
export function request(config){
    // 1、创建实例，不要创建全局的
    const instance = axios.create({
        baseURL:"http://123.207.32.32:8000/api/h8",
        timeout:5000//这个是5秒的意思
    })
    // 发送网络请求
    return instance(config);//instance(config)它本身返回一个Promise
}

②使用

<template>
  <div>
   
  </div>
</template>

<script>
import {request} from '@/api/request';
export default {
  name: 'App',
  components: {
    
  },
  created() {
	request({
	  url:'/home/multidata'
	}).then(res=>{
	  console.log(res);
	}).catch(err=>{
	  console.log(err);
	})
  },
}
</script>
<style>
</style>

二、拦截器
注：以后要拦截的时候，就使用对应的拦截器，就可以了
1、在src——>api——>request.js

//引入
import axios from 'axios';
/* 对其进行暴露(让其在外面传入；  
success，failure他俩都是参数  success是一个函数，failure他也是一个函数  然后都可以回调出去)*/
export function request(config){
    // 1、创建实例，不要创建全局的
    const instance = axios.create({
        baseURL:"http://123.207.32.32:8000/api/h8",
        timeout:5000//这个是5秒的意思
    })
    // 2、axios拦截器,它分为全局拦截（axios.interceptors）和实例拦截，下面我们使用实例拦截
    // 2-1、这样写代表拦截请求(里面有两个参数)
    instance.interceptors.request.use(config=>{
        // 这里拦截是成功的（这里至少是发送成功的）,所以在拦截之后，要return出去，要不然外面收不到
        // console.log(config);
        /* 请求拦截做的一些事情：
        1）比如它不符合服务器的要求的时候，在这里拦截掉；
        2）在这里进行一些数据的过滤；
        3）比如在页面发送请求的时候，在页面显示一个图标，在请求成功的时候，消失掉；
        4）某些 网络的请求（比如登录的token），必须携带一些特殊的信息时，就比如在发送某些
        必须登录之后，才能发送的求情时，可以在这判断，在没登录的时候，让其登录之后，才可
        以发送某些请求*/
        return config;
    },err=>{//这块很少来到，因为是发送失败的(数据很少发送失败)
        console.log(err);
    });
    // 2-2、拦截响应(这里也要传入两个参数)，所以是结果
    instance.interceptors.response.use(res=>{
        // 服务器已经响应了,服务器返回的真正结果
        // console.log(res);
        // 在这返回结果，因为在别的地方要使用，如果这块不返回，在别的地方 就没办法使用
        return res;
    },err=>{
        console.log(err);
    });
    // 3、发送网络请求
    return instance(config)
}

2、使用（使用方法如请求封装）

// 在这块调用这个函数
import {request} from '@/api/request';

request({
  url:'/home/multidata'
}).then(res=>{
  console.log(res);
}).catch(err=>{
  console.log(err);
})

三、axios登录的请求写法
1、src——>api——>request.js

//引入
import axios from 'axios';
/* 对其进行暴露(让其在外面传入；  
success，failure他俩都是参数  success是一个函数，failure他也是一个函数  然后都可以回调出去)*/
export function request(config){
    // 1、创建实例，不要创建全局的
    const instance = axios.create({
        baseURL:"url",
        timeout:5000//这个是5秒的意思
    })
    // 2、axios拦截器,它分为全局拦截（axios.interceptors）和实例拦截，下面我们使用实例拦截
    // 2-1、这样写代表拦截请求(里面有两个参数)
    instance.interceptors.request.use(config=>{
        /* 这里拦截是成功的（这里至少是发送成功的）,所以在拦截之后，要return出去，
        要不然外面收不到*/
        // console.log(config);
        /* 请求拦截做的一些事情：
        1）比如它不符合服务器的要求的时候，在这里拦截掉；
        2）在这里进行一些数据的过滤；
        3）比如在页面发送请求的时候，在页面显示一个图标，在请求成功的时候，消失掉；
        4）某些 网络的请求（比如登录的token），必须携带一些特殊的信息时，就比如在发送某些
        必须登录之后，才能发送的求情时，可以在这判断，在没登录的时候，让其登录之后，才可
        以发送某些请求*/
        return config;
    },err=>{//这块很少来到，因为是发送失败的(数据很少发送失败)
        console.log(err);
    });
    // 2-2、拦截响应(这里也要传入两个参数)，所以是结果
    instance.interceptors.response.use(res=>{
        // 服务器已经响应了,服务器返回的真正结果
        // console.log(res);
        // 在这返回结果，因为在别的地方要使用，如果这块不返回，在别的地方 就没办法使用
        return res;
    },err=>{
        console.log(err);
    });
    // 3、发送网络请求
    return instance(config)
}

2、在页面请求数据的时候，在加一层
住：src——>api——>login.js

import {request} from '@/api/request';
// 登录的数据
export function login(username,password){
    return request({
        url:'/url',
        //在这写数据请求方式
        method:"post",
        params:{
        	//下面这俩是和后端约定好的键名
            username,
            password
        }
    })
}

3、在页面中调用上面的方法
住：下面用了elementUI

<template>
    <div class="login_container">
        <!-- 登录组件 -->
        <div class="login_box">
            <!-- 头像 -->
            <div class="avatar_box">
                

            </div>
            <!-- 表单区域(拿到这个表单里面的实例对象，就是用ref) -->
            <el-form ref='login_From' :model="loginFrom" :rules="loginRules" label-width="0px" class="login_from ">
                <!-- 账户 -->
                <el-form-item label="" prop="userName">
                    <el-input prefix-icon="iconfont icon-user" v-model="loginFrom.userName">
                    </el-input>
                </el-form-item>
                <!-- 密码 -->
                <el-form-item label="" prop="userPassword">
                    <el-input prefix-icon="iconfont icon-3702mima" v-model="loginFrom.password" type="password">
                    </el-input>
                </el-form-item>
                <!--  -->
                <el-form-item label="" class="login_btns">
                    <el-button type="primary" @click="loginBtn">登录</el-button>
                 
                    <el-button type="info" @click="restBtn">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
// 引入数据的请求
/* import {request} from '@/api/request';*/
import {login} from '@/api/login.js';
export default {
    data() {
        return {
            // 这是登陆的数据对象
            loginFrom:{
                userName:'admin',
                password:'123456'
            },
            // 添加验证对象
            loginRules:{
                // 用户名
                userName:[
                     { required:true,message:'请输入登录名称', trigger:'blur'},
                     { min:3, max:10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ],
                // 密码
                userPassword:[
                    { required:true,message:'请输入登录密码', trigger:'blur'},
                    { min:3, max:10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        // 点击重置的
        restBtn(){
            // 指向当前登录的组件实例对象
            // console.log(this);
            this.$refs.login_From.resetFields();//他是重置表单
        },
        // 点击登录，对他进行一个yu验证
        loginBtn(){
// 登录的数据
           /* 
           //像下面这个写法，可以省略第二步
           request({
                url: '/login',
                method:"post",
                params: {
                    username:this.loginFrom.userName,
                    password:this.loginFrom.password
                }
            }).then(res =>{
               console.log(res);

            })
*/
	//传入两个参数
            login(this.loginFrom.userName,this.loginFrom.password).then(res =>{
                console.log(res);
            })
        },


    },
}
</script>
<style scoped>

</style>

四、请求报错的解决方法
住：出现以下报错的时候：
在这里插入图片描述
出现这个表示后端解决了跨域，但是 前台的请求，需要携带一个身份验证信息，但是在Options预请求时被拦截下来了，所以要解决这个拦截。

解决方法如下：
axios.defaults.withCredentials = true;
这样解决了，加在request.js里（即封装的数据请求里面）。
在这里插入图片描述

五、axios数据请求封装
1、在src——>utils——>request.js里写axios封装

//引入
import axios from 'axios';
//解决跨域（后台解决之后，用它,它代表每次发数据的时候，要向后台发送一个身份验证，它默认是false）
axios.defaults.withCredentials = true;
// 在这块引入elementUI进行错误的提示

export function request(config){
    // 1、创建实例，不要创建全局的
    const instance = axios.create({
        baseURL:"URL",
        timeout:5000,
        headers:{
            "content-type": "application/json;charset=UTF-8",
        }
    })
    // 2、axios拦截器
    instance.interceptors.request.use(config=>{
        //在这块给每个请求添加token，根据情况自己修改
        return config;
    },
	err=>{//这块很少来到，因为是发送失败的(数据很少发送失败)
        console.log(err);
    });
    // 2-2、拦截响应
    instance.interceptors.response.use(res=>{
        //响应拦截器，所以在这处理结果
        return res;
    },err=>{
        console.log(err);
    });
    // 3、发送网络请求
    return instance(config)
}

转自：https://blog.csdn.net/qq_45669178/article/details/105921842?utm_source=app

小手冰凉007
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue中使用Axios请求后端接口的方法总结
Allurewuhui的博客
12-07 4379
1.在入口文件引入axios并配置请求头根路径和请求头拦截 // 引入axios import axios from 'axios' // 设置请求根路径 axios.defaults.baseURL='http://127.0.0.1:8888/api/private/v1/' // 设置请求头拦截 axios.interceptors.request.use(config => { config.headers.Authorization = window.sessionStorage.
axios导出
u013239476的博客
07-02 314
exportExcel() { this.$axios({ method: method, url: url, data: data, responseType: 'blob' //这里要设置blob类型 }).then(data => { //data是后端返回的文件流 console.log(data); let blob = new Blob([data]); le
HTTP请求封装 & 拦截器的使用
huhm_evget的博客
04-25 957
文中代码部分来源于：https://blog.csdn.net/weixin_56947857/article/details/115908520 新建request.js，主要用于建立请求和响应拦截 import axios from 'axios' import { Message, MessageBox } from 'element-ui'//请根据自己的情况自信修改 import store from '../store' // 创建axios实例 const service = axios
利用Axios实现网络数据请求
weixin_52065872的博客
07-15 1374
什么是axios？ axios是专注于**网络数据请求**的库 相比于原生的XMLHttpRequest对象，axios **简单 易用** 相比于jQuery.ajax更加轻量化，只专注于网络数据的请求
axios请求数据
最新发布
weixin_68557949的博客
03-26 115
axios请求数据
vue axios数据请求及vue中使用axios的方法
10-18
以下是关于 Vue 中使用 Axios 进行数据请求的详细介绍： 1. **Axios 的基本介绍** Axios 是一个基于 Promise 的 HTTP 客户端，可以用于浏览器和 Node.js 环境。它的特性包括： - 支持 Promise API，使得异步操作...
vue 使用axios 数据请求第三方插件的使用教程详解
10-16
主要介绍了vue 使用axios 数据请求第三方插件的使用 ,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
axios数据请求功能封装包括get和post
03-22
axios数据请求功能封装包括get和post
vue axios数据请求get、post方法及实例详解
10-18
这里的`axios.post(url, params)`会发送POST请求，其中`params`是你要发送的数据。 axios还提供了其他高级特性，例如： - **设置请求头**：可以通过headers选项添加自定义请求头，如认证信息。 ```javascript ...
axios的5种请求方式
Fairy_tutu的博客
11-16 3313
完整更新服务器上的数据(一般可用于更新用户的完整信息)从服务器获取数据 (参数是 params:{键值对})向服务器新增数据 (参数是 data:{键值对})部分更新服务器上的数据(例如:只更新用户的手机号)
VUE 之 AXIOS请求
yhl521112的博客
08-27 1万+
AXIOS介绍 Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 axios是我们在vue项目中常见封装http请求相对受欢迎的，优点如下： 简单易用，api接近于jquery，比原生的fetch之类的简单， 浏览器兼容性好，都能兼容IE7，使用fetch就得自己处理兼容 通用性好，能在node和浏览器中使用 api一致 稳定大牌，vue官网文档有推荐 以上几点呢，是大多数公司选择使用axios的主要原因，通过简单的了解我们应该知道axios是干嘛的
vue学习笔记之axios网络请求
qq_39773416的博客
10-09 1245
axiox请求方式 axios(config) axios.request(config) axios.get(url[, config]) axios.delete(url[, config]) axios.head(url[, config]) axios.post(url[, data[, config]]) axios.put(url[, data[, config]]) axios.pa...
axios 数据请求
会飞的代码的博客
02-13 1万+
项目地址：https://github.com/axios/axiosaxios是一个基于Promise,同时支持浏览器端和Node.js的HTTP库，常用于Ajax请求。Vue.js 不像jQuery 或 AngularJS，本身并没有带Ajax方法，因此需要借助插件或第三方HTTP库。GET和POST请求  axios.get("./package.json",{           para...
axios封装，使用拦截器统一处理接口，超详细的教程
热门推荐
小只的博客
08-14 10万+
最近从0开始搭了一个vue-cli的项目， 虽然axios也可以直接拿来用，但是对接口比较零散，不太好进行维护，也会产生大量的重复代码，所以笔者对axios进行了统一接口处理，废话不多说，直接上代码。 首先，在vue-cli项目的src路径下新建一个axios文件夹，在axios文件夹里新建aps.js和request.js，api.js用于写接口，对axios的封装写在request.j...
请求，响应拦截
weixin_44230807的博客
10-18 655
import axios from 'axios'; import { getToken } from './tools'; // 获取touken const instance = axios.create({ timeout: 5000, //请求超时 baseURL: 'https://api.cat-shop.penkuoer.com/api/v1', //接口地址 }...
Vue使用ajax(axios)请求后台数据
豪先生的博客
03-17 1万+
前言：页面上那些数据，绝大部分都不是静态的数据，而是通过调用后台接口把数据渲染到页面上的效果。ajax可以帮助我们更好的去实现这一点，下面是详解在vue中如何使用它。 vue本身它是不支持直接发送ajax请求的，需要用到axios（一个基于promise的HTTP库，可以用在浏览器和node.js中）这是Axios文档的介绍，详细可查看：使用说明 · Axios 中文说明 · 看云 Axios安装 前台部分 1、npm安装 npm i axios -S //......
使用promise封装wx:requset()
IKUN__的博客
05-07 129
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言 一、使用promise封装wx:requset()？ 总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、promise是什么？ promise（首字母小写）对象指的是“Promise实例对象” Promi..
axios设置请求拦截后，数据请求成功，走error的问题
sinat_39648402的博客
07-20 5352
这个时候看一下response拦截器这里的代码 中间有这样一句 service.interceptors.response.use( response=>{ //在status正确的情况下，code不正确则返回相应的错误信息 return response.data.code === 200 ? response:Promise.reject(response.data.message); }） 注意一下这里return的值。我自己调试的时候出现标题描述的这个问题，是..
前端Vue学习之路(四)axios请求数据
qq_44623314的博客
09-13 898
sada

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值