vue系列---【axio安装、2种请求传参、配置代理、拦截器】

2021-05-19 23:36:08 阅读：145 来源： 互联网

标签：传参 axios 拦截器请求 url res axio data method

1.实现前后端数据交互，先启动后端

2.配置代理

在你的项目目录下创建一个文件，叫 vue.config.js:

module.exports = {
  // 部署应用时的基本 URL
  publicPath:"",
  // build 时构建文件的目录
  outputDir: 'dist',
  // build 时放置生成的静态资源 (js、css、img、fonts) 的目录 assetsDir: 'static',
  // 指定生成的 index.html
  indexPath: 'index.html',
  // 设置代理请求
  devServer: {
    proxy: {
      "/api":{
        	target:"url",
        	ws:true,
        	changeOrigin:true
      }
    } 
  }
}

注意：前端项目重启

3. 安装引入

npm i axios --save

import axios from "axios"

4. 2种请求

post

axios({
	url:"url",
	method:"post",
	data:{
		//参数
	}
}).then(res=>{
  console.log(res)
})


//axios.post(url,参数,config).then(res=>{})
axios.post("/login",{
  phone:"",
  password:""
},{
  headers:{}
}).then(res=>{})

get

axios({
	url:"url",
	method:"get", //method如果省略，默认是get
	params:{
		//参数
	}
}).then(res=>{
  console.log(res)
})


//axios.get(url,config).then(res=>{})
axios.get("/login",{
  params:{phone:"",password:""},
  headers:{}
}).then(res=>{})

5.post请求传参问题

没文件，用qs

安装：

npm i qs --save

引入：

import qs from "qs"

传参：

axios({
        //url 路径 method请求方式 data参数
        url: "/api/register",
        method: "POST",
        data: qs.stringify(user)
    })

有文件，FormData()

//user={name:"",pass:"",ava:File}
    let data=new FormData()
    // data.append("name","1")
    // data.append("pass",1),
    // data.append("ava",file)
    for(let i in data){
        data.append(i,user[i])
    }
    return axios({
        //url 路径 method请求方式 data参数
        url: "/api/register",
        method: "POST",
        data: data
    })

6.拦截器

请求拦截

//请求拦截:每一次发请求给后端，需要统一加的参数在请求拦截中做，比如加token
//请求拦截return的内容就是后端收到的真正的请求信息
axios.interceptors.request.use(config=>{
    localStorage.getItem("userInfo")&&( config.headers.authorization=JSON.parse(localStorage.getItem("userInfo")).token)
    return config
})

响应拦截

//响应拦截:每一次，后端返回的数据，统一操作在响应拦截中处理
//响应拦截return的内容就是组件收到的数据
axios.interceptors.response.use(res=>{
    //统一处理失败
    if(res.data.code!==200){
        alert(res.data.msg)
    }

    //掉线处理
    if(res.data.msg=="登录已过期或访问权限受限"){
        //跳转login
        router.push("/login")
    }

    console.log("本次请求路径是："+res.config.url)
    console.log(res)
    return res;
})

8.import

//一个文件只能有1个export default
// import a from "./a"
export default 10;


//可以有很多个export
// import {login,register} from "./a"
export let login = 20;
export let register = 30;
export let index = 40;

9.环境：

//开发环境 8080
if (process.env.NODE_ENV==="development") {
    Vue.prototype.$pre = "http://localhost:3000"
}

//生产环境：打包后的代码 3000
if (process.env.NODE_ENV==="production") {
    Vue.prototype.$pre = ""
}

标签：传参,axios,拦截器,请求,url,res,axio,data,method
来源： https://www.cnblogs.com/chenhaiyun/p/14787992.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9