axios以及post的封装

axios以及post请求的封装

1.安装axios

npm install axios --save

2.请求方式

axios.post() , axios.get() , axios({})

2.1get请求

axios.get("http://localhost:8080/api?list=1&&age=12")
给后端的参数是 ==> list:1 age:12

2.2post请求

axios.post("http://localhost:8080/api",{
	list:1,
	age:12
})

2.3axios({})

axios({
	url:"http://localhost:8080/api"，  ==>请求地址
	params:{}，  ==> get请求传参
	data:{}，    ==> post请求传参
	method:'post/get' ==> 请求方式
})

3.引入axios

在network文件夹下面新建一个request请求文件，文件名：request.js

import axios from 'axios'

4.配置axios的请求参数，请求拦截器，响应拦截器

axios.defaults.timeout =10000; //请求时长
axios.defaults.baseURL="http://localhost:8080" //请求地址

//http request 拦截器
axios.interceptors.request.use(config =>{
    config.headers={
        /**
         * 固定请求头部
        "Content-Type":"application/json; charset=utf-8",
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "PUT, POST, GET, DELETE, OPTIONS",
        "Access-Control-Allow-Private-Network": true,
         */
        "Content-Type":"application/json; charset=utf-8",
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "PUT, POST, GET, DELETE, OPTIONS",
        "Access-Control-Allow-Private-Network": true,
        "Authorization":JSON.parse(sessionStorage.getItem('token'))  //登陆成功后端返回token值
    }
    return config
},
error =>{
    return error
}
);

//响应拦截器即处理异常
axios.interceptors.response.use(res =>{
    return res
},
error=>{
    return error
}
)

5.封装Post请求

在network文件夹下面新建一个API接口文件：api.js，定义一个url对象写入接口，使用module.exports = {url}抛出

import {url} from "./api" //引入请求地址
export function post (url,data ={}){
    return axios.post(url,data)
} // post请求

注意：出现跨域问题

在项目的vue.config.js文件中，在module.exports中添加以下代码，配置代理来解决

devServer:{
    proxy:"http://localhost:8080/api"  //请求地址
  }