站长家园(原代码之家)(www.adminjie.com)网站源码,微信源码,游戏源码,商业源码分享平台。
当前位置:网站首页 技术文章 网络编程 正文

vue中用什么来发送请求

时间:2022-01-11 [网络编程]作者:fabuyuan 浏览:4 次

vue中,需要使用vue-resource、axios等插件来发送请求。axios是一个基于Promise的HTTP请求客户端,用来发送请求,也是vue2.0网推荐的,同时不再对vue-resource进行更新和维护。

vue中用什么来发送请求  2

本教程操作环境:windows7系统、vue2.9.6版,DELL G3电脑。

Vue——发送http请求详解

1)vue本身不支持发送AJAX请求,需要使用vue-resource、axios等插件实现。

2) axios是一个基于Promise的HTTP请求客户端,用来发送请求,也是vue2.0网推荐的,同时不再对vue-resource进行更新和维护。

使用axios发送AJAX请求

1、安装axios并引入

1)npm的方式: $ npm install axios -S 或 cnpm install axios -S

2)bower的方式:$ bower install axios

3)cdn的方式:<script src=”https://unpkg.com/axios/dist/axios.min.js”></script>

2、如何引入使用axios

安装其他插件的时候,可以直接在 main.js 中引入并 Vue.use(),但是 axios 并不能 use,只能每个需要发送请求的组件中即时引入

为了解决这个问题,有两种开发思路,

一是在引入 axios 之后,修改原型链

二是结合 Vuex,封装一个 aciton

方案一:改写原型链

首先在 main.js 中引入 axios

import axios from 'axios'
Vue.prototype.$http= axios

在组件中发送http请求

this.$http.post('/user',{name: 'xiaoming'})
this.$http({method: 'post',url: '/user',data: {name: 'xiaoming'}})

//发送get请求
this.$http.get('/user?ID=12345')
 .then(res=> { console.log(response); }) 
.catch(err=> { console.log(error); });
this.$http.get('/user',{params:{ID:12345}}) 
.then(res=> { console.log(response); }) 
.catch(err=> { console.log(error); });

//发送post请求

this.$http.post('/user',
{name: 'xiaoming'}
) 
.then(res=> { console.log(res) }) 
.catch(err=> { console.log(err)});

3、封装axios进行调用

/****   request.js   ****/
// 导入axios
import axios from 'axios'
// 使用element-ui Message做消息提醒
import { Message} from 'element-ui';

//1. 创建新的axios实例,
const service = axios.create({
  // 公共接口--这里注意后面会讲
  baseURL: '',
  // 超时时间 单位是ms,这里设置了3s的超时时间
  timeout: 3 * 1000
})
// 2.请求拦截器
service.interceptors.request.use(config => {

  //发请求前做的一些处理,数据转化,配置请求头,设置token,设置loading等,根据需求去添加
  config.data = JSON.stringify(config.data); //数据转化,也可以使用qs转换
  console.log('请求拦截器中',config)
  config.headers = {
    'Content-Type':'application/x-www-form-urlencoded' //配置请求头
  }
  //注意使用token的时候需要引入cookie方法或者用本地localStorage等方法,推荐js-cookie

  // const token = getCookie('名称');//这里取token之前,你肯定需要先拿到token,存一下

  // if(token){
  //   config.params = {'token':token} //如果要求携带在参数中
  //   config.headers.token= token; //如果要求携带在请求头中
  // }

  return config
}, error => {
  console.log('错误')
  Promise.reject(error)
})

// 3.响应拦截器
service.interceptors.response.use(response => {
  //接收到响应数据并成功后的一些共有的处理,关闭loading等

  return response
}, error => {
  console.log('error',error)
  /***** 接收到异常响应的处理开始 *****/
  if (error && error.response) {
    // 1.公共错误处理
    // 2.根据响应码具体处理
    switch (error.response.status) {
      case 400:
        error.message = '错误请求'
        break;
      case 401:
        error.message = '未授权,请重新登录'
        break;
      case 403:
        error.message = '拒绝访问'
        break;
      case 404:
        error.message = '请求错误,未找到该资源'
        // window.location.href = "/"
        break;
      case 405:
        error.message = '请求方法未允许'
        break;
      case 408:
        error.message = '请求超时'
        break;
      case 500:
        error.message = '服务器端出错'
        break;
      case 501:
        error.message = '网络未实现'
        break;
      case 502:
        error.message = '网络错误'
        break;
      case 503:
        error.message = '服务不可用'
        break;
      case 504:
        error.message = '网络超时'
        break;
      case 505:
        error.message = 'http版本不支持该请求'
        break;
      default:
        error.message = `连接错误${error.response.status}`
    }
  } else {
    // 超时处理
    if (JSON.stringify(error).includes('timeout')) {
      Message.error('服务器响应超时,请刷新当前页')
    }
    Message.error('连接服务器失败')
  }
  Message.error(error.message)
  /***** 处理结束 *****/
  //如果不需要错误处理,以上的处理过程都可省略
  return Promise.resolve(error.response)
})
//4.导入文件
export default service
/****   http.js   ****/
// 导入封装好的axios实例
import request from './request'


const http ={
  /**
   * methods: 请求
   * @param url 请求地址
   * @param params 请求参数
   */
  get(url,params){
    const config = {
      method: 'get',
      url:url
    }
    if(params) config.params = params
    return request(config)
  },
  post(url,params){
    console.log(url,params)
    const config = {
      method: 'post',
      url:url
    }
    if(params) config.data = params
    return request(config)
  },
  put(url,params){
    const config = {
      method: 'put',
      url:url
    }
    if(params) config.params = params
    return request(config)
  },
  delete(url,params){
    const config = {
      method: 'delete',
      url:url
    }
    if(params) config.params = params
    return request(config)
  }
}
//导出
export default http
import http from './http'
//
/**
 *  @parms resquest 请求地址 例如:http://197.82.15.15:8088/request/...
 *  @param '/testIp'代表vue-cil中config,index.js中配置的代理
 */
// let resquest = ""

// get请求
export function getListAPI(resquest,params){
  return http.get(`${resquest}/getList.json`,params)
}
// post请求
export function postFormAPI(resquest,params){
  console.log('发送post请求')
  return http.post(`${resquest}`,params)
}
// put 请求
export function putSomeAPI(resquest,params){
  return http.put(`${resquest}/putSome.json`,params)
}
// delete 请求
export function deleteListAPI(resquest,params){
  return http.delete(`${resquest}/deleteList.json`,params)
}

解决Vue跨域问题:

vue中用什么来发送请求  2

解决方法:在脚手架中的config下的index.js中

在 dev 的 proxyTable 对象中添加这些属性

// Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      "/api":{
        target:"https://xin.yuemei.com/V603/channel/getScreenNew/",//接口域名
        changeOrigin:true,//是否跨域
        pathRewrite:{
          "^/api":""//重写为空,这个时候api就相当于上面target接口基准地址
        }
      }
    },

然后请求这里用axios请求
请求的时候前缀api就相当于基准地址了

axios.post("/api").then(res => {
      console.log(res);
      this.data = res.data.data;
 });
 //如果有参数请求
 axios.post("/api?key=111").then(res => {
      console.log(res);
      this.data = res.data.data;
 });

配置完记得重跑一下项目(切记)

想要发送Ajax请求 通过两种方式

一:通过XHR对象

请求行:

method:post 或get url:请求地址

请求头:

host:主机地址

cookie
content-type:请求体内容

请求体:

响应行:status

响应头:多个响应头

响应体:

json/图片/css/js/html

二:通过fetch函数

【相关推荐:vue.js教程】

以上就是vue中用什么来发送请求的详细内容,更多请关注站长家园其它相关文章!

本文标签:  vue发送请求

转载请注明来源:vue中用什么来发送请求

本文永久链接地址:https://www.adminjie.com/post/7525.html

免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。

  • 站长家园(原代码之家)会员升级
  • 最新文章
    • 十分钟教你使用css实现烟雾效果

      十分钟教你使用css实现烟雾效果

      本篇文章给大家分享怎样利用css实现烟雾的效果,希望对大家有帮助。仔细观察烟雾效果,有两个比较重要的特点:模糊效果颗粒感首先看模糊效果,想到模糊,大部分同学首先...

    • 总结分享十个Linux环境下的替代工具

      总结分享十个Linux环境下的替代工具

      本篇文章给大家带来了linux操作系统下替代工具的相关知识,其中包括linux中安装和使用bat命令,希望对大家有帮助。在Linux操作系统下,我们经常使用...

    • 快来看一看你的git学的怎么样了(整理总结)

      快来看一看你的git学的怎么样了(整理总结)

      本篇文章给大家总结了git的相关知识,其中包括commit规范与提交验证、误操作的撤回方案和Tag与生产环境等,希望对大家有帮助。本文从前端工程,团队协作,生...

    • Docker总结分享之数据卷技术

      Docker总结分享之数据卷技术

      本篇文章给大家带来了Docker总结分享之数据卷技术的相关知识,希望对大家有帮助。Docker数据卷技术什么是容器数据卷docker的理念回顾将应和环境打包成一...

    • oracle如何修改列的值

      oracle如何修改列的值

      在oracle中,可以使用“update”命令来修改列的值,该语句可以用来修改、更新一个或多个表的数据,语法为“update表名set列名1=值1,列名2...

  • 买服务器送会员
  • 热门文章
  • 买服务器送会员