vue中如何发起请求

一般情况下我们会在vue中引入到axios，利用axios来发起请求，但是前期需要配置

第一种方式

首先安装axios

npm install axios -sava //在项目文件夹中打开cmd或者终端进行安装依赖

在安装完成以后 我们需要在main.js里面去进行配置

//main.js 在自动生成的目录中src中
import axios from 'axios'
Vue.prototype.$axios = axios

配置好了以后就可以直接到你所需要发起请求的页面发送请求了

this.$axios.get('url')
     .then(function(res){
    alert(res);
     })
     .catch(function(err){
    alert(err);
})

第二种方式

刚才说的第一种方式是对axios最原生的使用方式 但是我们一般在项目中 都会对axios进行一次封装，因为我们可能会去配置一些url或者header等等，那下面我们就来看看如何解决

同样是先安装axios

npm install axios -sava

其次我们创建一个新文件request

一般来说 我们会在src文件目录下创建一个新的文件夹util来放我们公用的方法（工具类），而我们的request就放到这个文件夹中

在request文件中我们需要写上以下代码

import axios from 'axios'//引入axios
​
//axios.create能创造一个新的axios实例
const server = axios.create({
  baseURL: "http://localhost:10001/renren-fast", //配置请求的url
  timeout: 6000, //配置超时时间
  headers:{}//配置请求头
})
​
// interceptors为axios的拦截器 如果我们想要在请求以前做些什么 这个时候就需要用到拦截器  视业务需求而定
server.interceptors.request.use(function (config) {
  //非登录的请求都加上一个请求头
  console.log("请求拦截器已经执行");
  return config;
}, function (error) {
  return Promise.reject(error);
});
​
export default server

interceptors拦截器一般做些什么？

• 修改请求头的一些配置项
• 给请求的过程添加一些请求的图标
• 给请求添加参数

同样配置好request以后，我们就可以发送请求了 当然 在项目中发送请求我们一般会同样在src下面新建一个api文件 用来批量管理请求

我们想要发送请求会先在api文件中新建一个js文件 然后在js文件中来发送请求 在这我们拿一个登录举例

post方法

import request from '../util/request.js' //引入我们封装好的request
//定义一个函数 getLogin
export function getLogin(obj) {
    return request({  //利用我们封装好的request发送请求
        url: '/api/login',//请求地址 已经去除前面request中baseUrl相同的内容
        method: 'post',//请求方法
        data: obj//向后端传递数据
    })
}

get方法

import request from '../util/request.js'//引入我们封装好的request
//定义一个函数 getUser
export function getUser(obj) {
    return request({ //利用我们封装好的request发送请求
        url: '/generator/workuser/list',//请求地址 已经去除前面request中baseUrl相同的内容
        method: 'get',//请求方法
        params: obj//向后端传递数据
    })
}

同样 我们get方法和post方法其实是类似的只是在向后端传递数据的时候一个是data一个是params

发送请求

当我们在api中完成封装以后，我们可以到我们需要发送请求的页面上去调用

import { getLogin} from '@/api/login' //首先引入我们的封装好的请求
​
//其次在需要调用的地方直接调用
 getLogin(params).then((res) => {
     console.log(res)
 }
//params 是我们传递给后端的参数
//其中 res就是后端返回回来的数据

qs

最后有的项目中可能会用到qs

首先同样需要安装qs

npm i qs -s

然后同样在api里的js文件中引入qs 并使用

import request from '../utils/request'
import qs from 'qs' //引入qs
​
export function login(data) {
  return request({
    method: 'POST',
    url: '/api/login',
    data: qs.stringify(data) //使用qs
  })
}

qs主要有两个方法

• qs.stringify()将对象序列化，多个对象之间用&拼接

  let obj= { //声明一个对象
       name: "xiaoming",
       age: "12"
     };
  ​
  console.log(qs.stringify(obj))//打印出来为method=xiaoming&age=12
  

• qs.parse()将URL解析成对象的形式

  let url='method=xiaoming&age=12'
  ​
  console.log(qs.parse(obj))//打印出来为
  // {
  //   name: "xiaoming",
  //   age: "12"
  // };
  

以上就是vue中axios的主要用法