为什么需要封装呢?主要是为了更好管理项目以及增加复用性

1、首先在src文件夹下创建api文件夹 、 utils文件夹 、 server文件夹

  api:创建一个index.js文件   用来存放接口地址

  utils:用来存放公用js文件

  server:用来存放请求的接口数据

2、在package.json文件中增加以下代码   【以下代码是中间代理作用】

3、在api文件中的index.js中写入  【api里面的命名全部为大写,用于区分】

const SAT_HOST = "http://localhost:8080";

/**
 * 请求电影   正在热映影片数据
 */
const GET_PLAYING = "/ajax/movieOnInfoList"

记住一定要记得向外输出
export default{
  SAT_HOST,
  GET_PLAYING
}

  在utils文件夹中创建http.js文件 封装 axios   【注:首先需要安装axios   不做赘述  (npm)】

import API from '../api';
import axios from 'axios'

export default function http({ url, method, data }) {
  let options = {
    url: url,
    method: method,
    baseURL: API.SAT_HOST,
    timeout: 2000
  }
  if (method == 'GET') {
    options.params = data
  } else if (method == "POST") {
    options.data = data
  }
  return axios(options)
}

  在server文件夹中创建一个用于请求数据的js文件  ,文件名自取  代码如下

import API from '../api';
import http from '../utils/http.js'

export function getPlaying(){
  return new Promise((resolve,reject)=>{
    http({
      url:API.GET_PLAYING,
      method:'GET',
      //用于写参数
      data:{

      }
    })
    .then(({data,status})=>{
      if(status != 200){
        return {}
      }else{     let data2 = data     resolve({      data:data2     })
        console.log(data);
      }
    })
    .catch(error=>{
      console.log(error)
    })
  })
}

4、需要在哪个vue文件中引入接口数据

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

<script>引入接口数据到当前vue文件
import {getPlaying} from './server/movieList'
export default {
  data(){
    return{

    }
  },
  created(){
    getPlaying().then(({movieList})=>{
      console.log(movieList)
    })
  }
}
</script>

<style>

</style>

vue 封装axios以及使用中间代理 proxy的更多相关文章

  1. Vue 封装axios(四种请求)及相关介绍(十三)

    Vue 封装axios(四种请求)及相关介绍 首先axios是基于promise的http库 promise是什么? 1.主要用于异步计算 2.可以将异步操作队列化,按照期望的顺序执行,返回符合预期的 ...

  2. vue封装axios

    一.安装axios npm install --save axios 二.在src下面创建文件夹api=>api.js(接口集合)+http.js(封装的请求) 三.在main.js中引用api ...

  3. vue 封装 axios 和 各类的请求,以及引入 .vue 文件中使用

    //src 底下建立 api 文件夹 // api 文件夹下建立 request,js 文件,文件内容复制下面这段代码即可   /**  * ajax请求配置  */ import axios fro ...

  4. vue封装axios方法推荐)

    目录结构: api.js export default { myTopic: '/api/subscribe-data/post/cat' } request.js import axios from ...

  5. vue cli+axios踩坑记录+拦截器使用,代理跨域proxy(更新)

    16319 1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点建议方式 在main.js中如下声明使用 import axios from 'ax ...

  6. vue cli+axios踩坑记录+拦截器使用,代理跨域proxy

    1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点 建议方式 在main.js中如下声明使用 import axios from 'axios'; ...

  7. Vue 给axios做个靠谱的封装(报错,鉴权,跳转,拦截,提示)

    需求及实现 统一捕获接口报错 弹窗提示 报错重定向 基础鉴权 表单序列化 用法及封装 用法 // 服务层 , import默认会找该目录下index.js的文件,这个可能有小伙伴不知道可以去了解npm ...

  8. vue中Axios的封装和API接口的管理

    前端小白的声明: 这篇文章为转载:主要是为了方便自己查阅学习.如果对原博主造成侵犯,我会立即删除. 转载地址:点击查看 如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题 ...

  9. vue中axios 配置请求拦截功能 及请求方式如何封装

    main.js 中: import axios from '................/axios' axios.js 中: //axios.js import Vue from 'vue' i ...

随机推荐

  1. 鸟哥的Linux私房菜-----8、文件系统的装载

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaGVrZXdhbmd6aQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...

  2. CF 447A(DZY Loves Hash-简单判重)

    A. DZY Loves Hash time limit per test 1 second memory limit per test 256 megabytes input standard in ...

  3. luogu2278 [HNOI2003]操作系统

    题目大意 写一个程序来模拟操作系统的进程调度.假设该系统只有一个CPU,每一个进程的到达时间,执行时间和运行优先级都是已知的.其中运行优先级用自然数表示,数字越大,则优先级越高.如果一个进程到达的时候 ...

  4. C# 你什么让程序员寂寞成酱紫 (男生版 娱乐中学习 抽象类 接口 继承 实现方法 )

    你什么让程序员寂寞成酱紫 (男生版 娱乐中学习 抽象类 接口 继承 实现方法 )   一个家庭 相当于 一个空间,这个空间里 有 很多元素,比如 爱,爱这个抽象事物,可能有很多动作,接吻.交流,对于一 ...

  5. B1270 [BeijingWc2008]雷涛的小猫 dp

    这个题的原始方法谁都会,但是n^3会T.之后直接优化,特别简单,就是每次处理出来每层的最大值,而不用枚举.之前没这么做是因为觉得在同一棵树的时候没有下落,所以不能用这个方法.后来想明白了,在同一棵树上 ...

  6. FFMS SQL文件执行错误

    [mysql] # 设置mysql客户端默认字符集 default-character-set=utf8 [mysqld] #设置3306端口 port = 3306 # 设置mysql的安装目录 b ...

  7. Tunnel Warfare(树状数组+二分)

    http://poj.org/problem?id=2892 题意:输入n,m.n代表数轴的长度,m代表操作数. D x: 摧毁点x Q x: 询问村庄x最左与最右没有被摧毁的点的距离 R  :恢复最 ...

  8. codevs1222 信与信封问题

    1222 信与信封问题  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond     题目描述 Description John先生晚上写了n封信,并相应地写了 ...

  9. WebService开发-Hessian

    Hessian 开发Web Service 一.关于Hessian Hessian是一个轻量级的remoting on http工具,使用简单的方法提供了RMI的功能. 相比WebService,He ...

  10. 快速掌握C#7

    1. out 变量(out variables) 以前我们使用out变量必须在使用前进行声明,C# 7.0 给我们提供了一种更简洁的语法 “使用时进行内联声明” .如下所示: var input = ...