http客户端axios

#keepalive_timeout 0;

keepalive_timeout 65;

server {

listen 8080;

server_name localhost;

= /表示精确匹配路径为/的url，真实访问为http://localhost:8088

location = / {

proxy_pass http://localhost:8088;

}

/no 表示以/no开头的url，包括/no1,no/son，或者no/son/grandson

真实访问为http://localhost:5500/no开头的url

若 proxy_pass最后为/ 如http://localhost:3000/;匹配/no/son，则真实匹配为http://localhost:3000/son

location /no {

proxy_pass http://localhost:8088;

}

/ok/表示精确匹配以ok开头的url，/ok2是匹配不到的，/ok/son则可以

location /Demo/testDemoTranNew {

proxy_pass http://localhost:8088;

}

}

}

复制代码

2.axios配置跨域

同时在axios中也可以配置跨域，方式如下：

1.修改config/index.js文件

//增加跨域

proxyTable: {

“/api”: {

//目标地址

target: “http://localhost:8088”,

changeOrigin: true,

pathRewrite: {

‘^/api’: ‘’

}

}

},

复制代码

2.main.js中增加变量

//跨域处理 相当于把index中的api地址拿过来

V

本文已被开源项目：【一线大厂面试真题解析+核心总结学习笔记+最新全套讲解视频+实战项目源码讲义】收录

ue.prototype.HOST = ‘/api’

复制代码

直接调用就可以了，完全避免了跨域！

3.axios的get请求

在使用时main.js需要导入axios组件。具体方式请参考下文。

// The Vue build version to load with the import command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from ‘vue’

import App from ‘./App’

import router from ‘./router’

import axios from “axios”

Vue.config.productionTip = false

Vue.prototype.$axios = axios

/* eslint-disable no-new */

new Vue({

el: ‘#app’,

router,

components: { App },

template: ‘’

})

复制代码

vue中的get请求.有两种写发，以下附上两种写法的格式。

{{data}}

复制代码

4.axios的post请求

在调用中也有两种写法，需要注意的是，需要使用qs去格式化参数，因为需要把对象转换成json格式。

{{data}}

复制代码

5.url的全局配置

因为如果调用的api前缀相同，那么可以使用全局配置，将url配成全局，避免多次书写。

这里需要时对main.js配置，以下附上代码。

// The Vue build version to load with the import command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from ‘vue’

import App from ‘./App’

import router from ‘./router’

import axios from “axios”

Vue.config.productionTip = false

Vue.prototype.$axios = axios

axios.defaults.baseURL = ‘https://api.example.com’;

axios.defaults.headers.common[‘Authorization’] = AUTH_TOKEN;

axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’;

/* eslint-disable no-new */

new Vue({

el: ‘#app’,

router,

components: { App },

template: ‘’

})

复制代码

调用时，url就可以省略baseURL中配置的

6.拦截器

在axios发送前和接受前，先执行拦截器(类似java拦截器)，这里需要在main.js中加入配置。

// The Vue build version to load with the import command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from ‘vue’

import App from ‘./App’

import router from ‘./router’

import axios from “axios”

import qs from ‘qs’

Vue.config.productionTip = false

Vue.prototype.$axios = axios

axios.defaults.baseURL = ‘https://api.it120.cc’;

//axios.defaults.headers.common[‘Authorization’] = AUTH_TOKEN;

//axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’;

// 添加请求拦截器

axios.interceptors.request.use(function(config) {

// 在发送请求之前做些什么

console.log(config)

if (config.method === “post”) {

config.data = qs.stringify(config.data);

}

return config;

}, function(error) {

// 对请求错误做些什么

return Promise.reject(error);

});

// 添加响应拦截器

axios.interceptors.response.use(function(response) {

console.log(response)

if (response.status !== 200) {

return;

}

// 对响应数据做点什么

return response;

}, function(error) {

// 对响应错误做点什么

return Promise.reject(error);

});

/* eslint-disable no-new */

new Vue({

el: ‘#app’,

router,

components: { App },

template: ‘’

})

复制代码

这样的话，在接下来的使用中我们拦截了qs方法，在之后的使用中就不必每一个请求都调用qs方法了。

{{data}}

最后

看完美团、字节、腾讯这三家的面试问题，是不是感觉问的特别多，可能咱们又得开启面试造火箭、工作拧螺丝的模式去准备下一次的面试了。

开篇有提及我可是足足背下了1000道题目，多少还是有点用的呢，我看了下，上面这些问题大部分都能从我背的题里找到的，所以今天给大家分享一下互联网工程师必备的面试1000题。

注意不论是我说的互联网面试1000题，还是后面提及的算法与数据结构、设计模式以及更多的Java学习笔记等，皆可分享给各位朋友

互联网工程师必备的面试1000题

而且从上面三家来看，算法与数据结构是必备不可少的呀，因此我建议大家可以去刷刷这本左程云大佬著作的《程序员代码面试指南 IT名企算法与数据结构题目最优解》，里面近200道真实出现过的经典代码面试题。

router,

components: { App },

template: ‘’

})

复制代码

这样的话，在接下来的使用中我们拦截了qs方法，在之后的使用中就不必每一个请求都调用qs方法了。

{{data}}

最后

看完美团、字节、腾讯这三家的面试问题，是不是感觉问的特别多，可能咱们又得开启面试造火箭、工作拧螺丝的模式去准备下一次的面试了。

开篇有提及我可是足足背下了1000道题目，多少还是有点用的呢，我看了下，上面这些问题大部分都能从我背的题里找到的，所以今天给大家分享一下互联网工程师必备的面试1000题。

注意不论是我说的互联网面试1000题，还是后面提及的算法与数据结构、设计模式以及更多的Java学习笔记等，皆可分享给各位朋友

[外链图片转存中…(img-q1eTKnS6-1723365668105)]

互联网工程师必备的面试1000题

而且从上面三家来看，算法与数据结构是必备不可少的呀，因此我建议大家可以去刷刷这本左程云大佬著作的《程序员代码面试指南 IT名企算法与数据结构题目最优解》，里面近200道真实出现过的经典代码面试题。

[外链图片转存中…(img-7zrqPcJW-1723365668106)]

本文已被CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录