axios二次封装(详细+跨域问题)
web Vue 2022-12-13 811 0
关于本站

“最难不过坚持”

本人承接扒站仿站,php网站维护,病毒查杀,网站编辑,网站改版,html制作

有需要网站维护,改版,病毒查杀,网站编辑,网站备案,html制作等相关的工作可以联系我。
本人有多年相关工作经验,也可提供免费咨询,交个朋友。
有需要探讨问题的朋友,也可以加我微信,共同探讨!
微信:15011482830 QQ:408917339

6280327 2594 39
最新评论
https://jueru.net/
评 留言
:weixiao:
评 留言
:shuijiao: :weiqu: :zhenbang: :leng:
评 留言
:yiwen: :yiwen: :yiwen: :yiwen:
评 EasySass: could not generate CSS file. See Output panel for details.
这个业务逻辑多少都有点奇怪了,阅读浏览次数增值在新闻详情页的控制器方法里setInc,这怎么还写进模型事件里了。如果非要用onAfterRead也可以,把新闻文章的内容单独分出来一个news_content表,然后把它和news做关联,然后给news_content表的onAfterRead事件做增值处理,这样点进新闻页内查询到文章内容时才会触发它。
评 TP6模型事件-查询后onAfterRead不好用
文章标签更多
ThinkPHP (254)
Mysql (58)
DedeCms (33)
jQuery (67)
证件照 (1)
setInc (4)
setDec (4)
onclick (5)
打开边栏(ESC) 关闭边栏(ESC)
一,为什么要对axios进行二次封装?
答:主要是要用到请求拦截器和响应拦截器;
请求拦截器:可以在发请求之前可以处理一些业务
响应拦截器:当服务器数据返回以后,可以处理一些事情

二,axios的二次封装
2.1 安装axios

在当前的项目路径下安装

cnpm install --save axios
2.2 通常情况下,项目都有一个api文件夹(axios二次封装的文件夹)
a.创建一个api文件夹
b.在api文件夹下创建request.js(用于书写axios二次封装的代码)
from clipboard

c.在request.js书写axios二次封装的代码

//对axios进行二次封装,将刚才下载好的axios导入进来
import axios from "axios";

//1.利用axios对象的方法create,去创建一个axios实例
//2.requests就是axios,只不过稍微配置一下
const requests = axios.create({
	//配置对象
	//基础路径,发请求的时候,路径当中会出现api,不用你手写
	baseURL:'/api',
	//请求时间超过5秒
	timeout:5000
});
//请求拦截器:在发请求之前,请求拦截器可以检测到,可以在请求发出去之前做一些事情
requests.interceptors.request.use((config)=>{
 	//config是个配置对象,对象里面有一个属性很重要,headers请求头
 	return config;		
});
 
//响应拦截器:包含两个函数(一个是成功返回的函数,一个是失败的返回的函数)
requests.interceptors.response.use((res)=>{
	//成功的回调函数:服务器响应数据回来以后,响应拦截器可以检测到,可以做一些事情。
	return res.data;	
},(error)=>{
	return promise.reject(new Error('faile'))
});
//对外暴露requests(axios的二次封装)
export default requests;
d.对api进行统一管理 (请求的接口比较多,需要统一管理)

1.在api文件夹新建一个index.js,用于管理接口
2.在index.js书写代码
//导入刚才写好的axios二次封装的requests
import requests from "./request";
//三级联动接口
///api/product/getBaseCategoryList get 无参数
//发请求:axios发请求返回结果promise对象
export const reqCategoryList = ()=>{
	//由于前面配置了基础路径,所以不用加/api
	return requests({url:'/product/getBaseCategoryList',method:'get'})
}
3.跨域问题
什么是跨域:协议,域名,端口号不同请求,称之为跨域
例:http://localhost:8000/#/home —前端项目的本地服务器
http://39.98.123.211 —调取数据的后台服务器
直接调取后台服务器数据的话,会出现404

4.解决跨域问题(3种:JSONP,CROS和代理)

我们用代理解决,在vue.config.js配置如下代码
from clipboard
//代理跨域
  devServer:{
    proxy: {
      "/api": {
      //后台服务器地址
        target: "http://gmall-h5-api.atguigu.cn",
       
      }
    }
  } 

测试三级联动api

// 测试
import {reqCategoryList} from '@/api'
reqCategoryList()
from clipboard

有返回数据,说明接口正确

版权声明:本篇文章来源于网络。 来源链接

相关推荐
接口返回request failed with status code 500错误
Vue | 2023-02-20 2569
接口返回request failed with status code 500错误 登录界面,验证账号密码成功,但是返回500错误 可能原因:linux服务器,用tp5搭建的后台及接口,会生成一部分缓存文件,但是linux默认没有权限创建数据,所以,只要在缓存文件夹runtime添加写的权限即可
vue项目npm run serve默认浏览器打开
Vue | 2022-11-16 1840
1、在vue项目中,输入命令行  npm run serve   浏览器实现自动打开功能,需要添加 在配置文件(package.json)中添加 --open 2、浏览器自动打开后,可能会出现网址0.0.0.0:8080页面错误,见图 3、解决方法: 在--open后面再加上--...
评论:0条
评论加载中...
发表评论