1. 始vue化项目
https://www.cnblogs.com/xiaonq/p/11027880.html
 
vue init webpack deaxios # 使用脚手架创建项目 deaxios(项目名,随便取得)
cd deaxios # 进入项目
npm install axios@0.19.2 # 安装axios
npm i element-ui -S # 安装element-ui到当前项目
 

前端项目结构规范
 

2.封装axios
 
2.1 创建 src/http 文件夹
 
用来放网络请求相关的文件
 
2.2 src/http/index.js
 
文件夹下, 创建 index.js 文件, 对axios进行封装
 
/* eslint-disable */
// 第一步:实例化axios对象,简单封装
const axios = require('axios'); // 生成一个axios实例
axios.defaults.baseURL = 'http://127.0.0.1:8000'; // 设置请求后端的URL地址
axios.defaults.timeout = 10000; // axios请求超时时间
axios.defaults.withCredentials = true;
 
axios.defaults.headers['Content-Type'] = 'application/json'; // axios发送数据时使用json格式
axios.defaults.transformRequest = data => JSON.stringify(data); // 发送数据前进行json格式化
 
// 第二:设置拦截器
/**
* 请求拦截器(当前端发送请求给后端前进行拦截)
* 例1:请求拦截器获取token设置到axios请求头中,所有请求接口都具有这个功能
* 例2:到用户访问某一个页面,但是用户没有登录,前端页面自动跳转 /login/ 页面
*/
 
axios.interceptors.request.use(config => {
  // 从localStorage中获取token
  // let token = localStorage.getItem('token');
  // 如果有token, 就把token设置到请求头中Authorization字段中
  // token && (config.headers.Authorization = token);
  return config;
}, error => {
  return Promise.reject(error);
});
 
/**
* 响应拦截器(当后端返回数据的时候进行拦截)
* 例1:当后端返回状态码是401/403时,跳转到 /login/ 页面
*/
 
axios.interceptors.response.use(response => {
  // 当响应码是 2xx 的情况, 进入这里
  // debugger
  return response.data;
}, error => {
  // 当响应码不是 2xx 的情况, 进入这里
  // debugger
  return error
});
 
/**
* get方法,对应get请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
export function get(url, params, headers) {
  return new Promise((resolve, reject) => {
    axios.get(url, { params, headers }).then(res => {
      resolve(res)
    }).catch(err => {
      reject(err)
    })
  })
}
 
// 第三:根据上面分装好的axios对象,封装 get、post、put、delete请求
/**
* post方法,对应post请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
**/
 
export function post(url, params, headers) {
  return new Promise((resolve, reject) => {
    axios.post(url, params, headers).then((res) => {
      resolve(res)
    }).catch((err) => {
      // debugger
      reject(err)
    })
  })
}
 
export function put(url, params, headers) {
  return new Promise((resolve, reject) => {
    axios.put(url, params, headers).then((res) => {
      resolve(res)
    }).catch((err) => {
      // debugger
      reject(err)
    })
  })
}
 
export function del(url, params, headers) {
  return new Promise((resolve, reject) => {
    axios.delete(url, { data: params, headers }).then((res) => {
      resolve(res)
    }).catch((err) => {
      // debugger
      reject(err)
    })
  })
}
 
export default axios;
 
2.3 src/http/apis.js 接口地址
 
目录下创建 apis.js文件, 用来写 接口地址列表
 
/* eslint-disable */
import { get, post, put, del } from './index'
 
// 用户登录
export const login = (params, headers) => post("/login/", params, headers)

01.axios封装的更多相关文章

  1. axios封装

    前言 作为出入vue的小萌新,我在写请求的时候,也是毫不犹豫写了ajax,结果肯定是不行的... Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2. ...

  2. vue2.0 axios封装、vuex介绍

    一.前言 博主也是vue道路上的行者,道行不深,希望自己的东西能对大家有所帮助.这篇博客针对 了解过vue基础,但是没有做过vue项目的童鞋.如果想看基础指令,可以看我之前的一篇博客,请点击  跳转, ...

  3. 把axios封装为vue插件使用

    前言 自从Vue2.0推荐大家使用 axios 开始,axios 被越来越多的人所了解.使用axios发起一个请求对大家来说是比较简单的事情,但是axios没有进行封装复用,项目越来越大,引起的代码冗 ...

  4. vue项目搭建 (二) axios 封装篇

    vue项目搭建 (二) axios 封装篇 项目布局 vue-cli构建初始项目后,在src中进行增删修改 // 此处是模仿github上 bailicangdu 的 ├── src | ├── ap ...

  5. 原生js上传图片遇到的坑(axios封装)

    后台给我写了一个上传图片的接口,自己用form表单测试成功 接口可以正常跳转 测试的代码: <!doctype html> <html lang="en"> ...

  6. vue-cli3中axios如何跨域请求以及axios封装

    1. vue.config.js中配置如下 module.exports = { // 选项... // devtool: 'eval-source-map',//开发调试 devServer: { ...

  7. axios interceptors 拦截 , 页面跳转, token 验证 Vue+axios实现登陆拦截,axios封装(报错,鉴权,跳转,拦截,提示)

    Vue+axios实现登陆拦截,axios封装(报错,鉴权,跳转,拦截,提示) :https://blog.csdn.net/H1069495874/article/details/80057107 ...

  8. 【Vue】axios封装,更好的管理api接口和使用

    在现在的前端开发中,前后端分离开发比较主流,所以在封装方法和模块化上也是非常需要掌握的一门技巧.而axios的封装也是非常的多,下面的封装其实跟百度上搜出来的axios封装或者axios二次封装区别不 ...

  9. vue3.0+vite+ts项目搭建-axios封装(六)

    封装方式一 import axios from 'axios' import qs from 'qs' import { Toast } from 'vant' import Lockr from ' ...

随机推荐

  1. 项目启动加载配置,以及IP黑名单,使用CommandLineRunner和ApplicationRunner来实现(一般用在网关进行拦截黑名单)

    //使用2个类的run方法都可以在项目启动时加载配置,唯一不同的是他们的参数不一样,CommandLineRunner的run方法参数是基本类型,ApplicationRunner的run方法参数是一 ...

  2. 《Java从入门到失业》第五章:继承与多态(5.1-5.7):继承

    5.继承与多态 5.1为什么要继承 最近我儿子迷上了一款吃鸡游戏<香肠派对>,无奈给他买了许多玩具枪,我数了下,有一把狙击枪AWM,一把步枪AK47,一把重机枪加特林(Gatling).假 ...

  3. 【小白学PyTorch】19 TF2模型的存储与载入

    [新闻]:机器学习炼丹术的粉丝的人工智能交流群已经建立,目前有目标检测.医学图像.时间序列等多个目标为技术学习的分群和水群唠嗑的总群,欢迎大家加炼丹兄为好友,加入炼丹协会.微信:cyx64501661 ...

  4. Java知识系统回顾整理01基础04操作符02关系操作符

    一.关系操作符 关系操作符:比较两个变量之间的关系  > 大于 >= 大于或等于 < 小于 <= 小于或等于 == 是否相等 != 是否不等 public class Hell ...

  5. P6268 [SHOI2002]舞会

    题目描述 Link 某学校要召开一个舞会.已知学校所有 \(n\) 名学生中,有些学生曾经互相跳过舞.当然跳过舞的学生一定是一个男生和一个女生.在这个舞会上,要求被邀请的学生中的任何一对男生和女生互相 ...

  6. 【题解】NOIP2018 赛道修建

    题目戳我 \(\text{Solution:}\) 根据题目信息简化题意,是让你在树上找出\(m\)条路径使得路径长度最小值最大. 看到题第一感先二分一个答案,问题转化为如何选择一些路径使得它们最小值 ...

  7. 阿里云服务器安装mongodb并且启动

    // 1.下载 我是直接在local里面创一个mongodb文件夹进行下载和解压 curl -O https://fastdl.mongodb.org/linux/mongodb-linux-x86_ ...

  8. vue-integer-plusminus

    下载 vue-integer-plusminusvue-integer-plusminus 带有递增和递减按钮的整数输入 现场演示 该组件适合作为自旋按钮,允许键盘功能(向上/向下箭头或页面向上/向下 ...

  9. Tomcat配置Gizp 客户端使用okHttp3

    找到tomcat 在 server.xml 新增如下配置 <Connector connectionTimeout="20000" port="8088" ...

  10. SpringBoot+单机redis

    spring boot-redis集成 看教程来的,看起来很简单,但是集成后发现启动失败? WARN 2556 --- [ restartedMain] ationConfigEmbeddedWebA ...